Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove header whitespacing from Streamlit/Hydralit

I am trying to remove white spacing from my Streamlit (v. 1.1.0) application, based on Hydralit (as seen in the image; both spaces below the logo and the home page.

I tried with:

# 1
st.markdown(
        f""" <style>
        .reportview-container .main .block-container{{
            padding-top: 0 rem;
            padding-right: 0 rem;
            padding-left: 0 rem;
            padding-bottom: 0 rem;
        }} </style> """,
        unsafe_allow_html=True,
    )
# 2 
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)

enter image description here

But none of them seem to be working; how can I condense the layout and effectively reduce space both from below the logo and above the first header of the page?

like image 886
Alessandro Ceccarelli Avatar asked Nov 01 '25 01:11

Alessandro Ceccarelli


1 Answers

This line reduces the padding above the header from the default 6rem to 2rem.

st.write('<style>div.block-container{padding-top:2rem;}</style>', unsafe_allow_html=True)
like image 73
jein Avatar answered Nov 03 '25 15:11

jein



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!