CSS for Controlling App Width No Longer Works in Streamlit 1.40

Using Streamlit
,
1

Hi Streamlit Community,

I recently upgraded from Streamlit 1.38 to 1.40 and noticed that my custom CSS for controlling the app width no longer works.

Previously, I used the following CSS to adjust the app’s width:

.appview-container .main .block-container {{
    max-width: {max_width}px;
}}

This worked perfectly in 1.38, but after upgrading to 1.40, it doesn’t seem to have any effect.

I suspect that the class names or the DOM structure might have changed in the new version. I tried inspecting the DOM but couldn’t pinpoint the issue.

Has anyone else experienced this? Could you provide guidance on how to update the CSS to work with the latest Streamlit version?

Any help would be greatly appreciated!

Thanks in advance!

2

If you look up the streamlit html via right click and inspect, I think .main has been replaced with .stMain.

Try using this:

section[data-testid="stMain"] > div[data-testid="stMainBlockContainer"]{{
     max-width: {max_width}px;
}}
1 Like
3

Thank you so much for pointing that out! :tada:

Updating the CSS to target .stMain instead of .main worked perfectly.

I really appreciate your help! :raised_hands:

1 Like
4

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