Fixing Responsive Design in Streamlit App

Using Streamlit
, , , ,
1

Hi,

I am new to Streamlit, and I recently built a chat application for my organization using Streamlit. However, I made a mistake while styling the app. I customized the entire page by directly modifying the CSS of Streamlit objects.

Now, when I run the app on different screen sizes, the layout breaks—it doesn’t look as intended, with objects misaligned or “flying” around.

I understand that Streamlit supports responsive design by default, but my CSS changes have overridden the default behavior, causing these issues.

Can someone suggest a way to fix this? Do I need to adjust each object manually, or is there a way (perhaps with JavaScript or improved CSS) to restore responsiveness?

For reference, I am using Streamlit version 1.38.0.

Thank you!