How do I reduce or eliminate the top margin of my mobile screen?

I tried it.

st.markdown('''
<style>
.stApp [data-testid="stHeader"] {visibility: hidden;}
.block-container {
        margin-top: 0 !important;
}
</style>
''', unsafe_allow_html=True)
st.markdown("""
    <style>
    .block-container {margin-top: 0 !important}
    </style>
    """, unsafe_allow_html=True)
st.markdown('''
<style>
.appview-container .main .block-container{{
        padding-top: {padding_top}rem;    }}
</style>
''', unsafe_allow_html=True)

Hi @Gyunald,

If you are using Streamlit V1.25,
For the sidebar, try:

st.markdown(" <style> div[class^='css-1544g2n'] { padding-top: 2rem; } </style> ", unsafe_allow_html=True)

For the main content area, try:

st.markdown(" <style> div[class^='block-container'] { padding-top: 2rem; } </style> ", unsafe_allow_html=True)

If you are using any other streamlit version, you would need to inspect the page to get the selectors.

Cheers

4 Likes

Perfect. You’re the best, brother!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.