Remove header whitespacing from Streamlit/Hydralit

user_8618380 0
Viewed 1239

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?

streamlit html python
2 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)
user_70975360

jein solution works for me if I do st.markdown instead of write

reduce_header_height_style = """
    <style>
        div.block-container {padding-top:1rem;}
    </style>
"""
st.markdown(reduce_header_height_style, unsafe_allow_html=True)
user_68528770
Related