Reduce white space top of the page

I find the white space on the top of the page of streamlit apps a bit too much, is there any way I can reduce the white space? Thanks!

4 Likes

Hi @Philip_Oosterholt , this seems to have been answered in

Cheers

1 Like

Thanks, the solution didnt work but I managed to change the properties with some tweaking:

# Remove whitespace from the top of the page and sidebar
st.markdown("""
        <style>
               .css-18e3th9 {
                    padding-top: 0rem;
                    padding-bottom: 10rem;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }
               .css-1d391kg {
                    padding-top: 3.5rem;
                    padding-right: 1rem;
                    padding-bottom: 3.5rem;
                    padding-left: 1rem;
                }
        </style>
        """, unsafe_allow_html=True)
7 Likes

The code seems to be working locally but not on streamlit cloud. Kindly find some other solution

3 Likes

Has anyone found a recent fix for this?

4 Likes
st.markdown("""
        <style>
               .block-container {
                    padding-top: 1rem;
                    padding-bottom: 0rem;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }
        </style>
        """, unsafe_allow_html=True)

This is working for me on AWS. It will probably work in streamlit cloud too!! You can change the numbers of rem in the padding to your liking.

12 Likes

thanks, this works for me.

1 Like

FYI, putting zero padding for the top will prevent st.info and other user messages from displaying completely. The least amount of rem to fully display the messages at the top of the app is 3rem from my testing.

1 Like

This seems to stop working, at least with streamlit 1.28.1. It changes the padding left and right, but not at the topโ€ฆ

2 Likes

This works, I am using streamlit 1.31.0.

1 Like

Hey! Thanks for the answer. It works for me as Iโ€™m using streamlit 1.30.0.

My problem is just that the block code is applying top padding on SideBar, relocating my page Title downwards. Any tips on applying only on main page container?

No experience with CSS at alโ€ฆ

โ€˜app_settings.pyโ€™:

def reduce_top_whitespace():

# Reducing whitespace on the top of the page
st.markdown("""
<style>

.block-container
{
    padding-top: 1rem;
    padding-bottom: 0rem;
    margin-top: 1rem;
}

</style>
""", unsafe_allow_html=True)

In my โ€˜Home.pyโ€™ page:

Sidebar

with st.sidebar:
    st.markdown('# ๐Ÿ  Home')
    add_vertical_space(2)

# Applying common settings
app_settings.apply_common_settings()
app_settings.reduce_top_whitespace()

Thank you!

1 Like