Modify size/margin of the main page container?

[Don-Yin]

Hi all,

Is it possible to change the size of the main page container (for example, top margin, width, and side margin)? I’m extremely disappointed that being unable to eliminate the large top margin on my pages:

That is, there is this massive margin at the top that does not go away; is there a way to eliminate it?

I have previously (and successfully) used:

<style>
    }}
        .reportview-container .main .block-container{{
        max-width: {percentage_width_main}%;
        padding-top: {1}rem;
        padding-right: {1}rem;
        padding-left: {1}rem;
        padding-bottom: {1}rem;
    }}

        .uploadedFile {{display: none}}
        footer {{visibility: hidden;}}
</style>

with st.markdown(unsafe_allow_html=True) which somehow stopped working at certain point, presumably as a result of a version update. I’d like to ask for help with an updated solution and would appreciate any responses.

Best, Don

[mcperez2]

Hi Don,
I found a solution changed reportview-container by appview-container. In my case, I just adjusted the padding-top as follow:

<style>
.appview-container .main .block-container{{
        padding-top: {padding_top}rem;    }}
</style>

[Don-Yin]

Hi mcperez2,

Many thanks, mcperez2. Your solution worked so great!

Best,
Don