Using CSS media queries within Streamlit?

I am working on creating web apps in Streamlit and am fascinated by the possibility of working with CSS media queries to customize how the app looks on a mobile screen vs. a desktop / laptop screen.

I know Streamlit allows you to inject custom CSS using hide_default_format with st.markdown, which Iโ€™ve done to style various components in my apps. My thinking is, if media queries can work within a Streamlit app (not sure if they can), I would think this is where you would add it.

Something like but not necessarily:

hide_default_format = """
<style>
      /* example query for mobile layout */
      @media (max-width: 768px) {
        .container {
          flex-direction: column;
        }
</style>
"""

In its current iteration, I donโ€™t think a media query like this would work because it would entail having greater control over the HTML, like the ability to specifically create <div> elements and containers, and naming them so that I can get a handle on them in the CSS.

Before I go too far down this particular rabbit hole, I wanted to ask if anyone else has tinkered with this on their Streamlit apps and been successful? I know Streamlit says their apps are by nature โ€œresponsiveโ€, but I want to be able to more precisely control exactly how the apps look on different size screens, like making some components of the app disappear entirely, or rearrange the components of the app, based on the screen size.

Hi @wwright

Here are some relevant resources to get you started.

Firstly, Iโ€™ve made a video on custom CSS styling of Streamlit app using st.markdown()

@BugzTheBunny create a repo showing various examples of custom CSS styling in a Streamlit app:

Also, according to the roadmap there are plans for Visual customization in the latter part of the year:

https://roadmap.streamlit.app/~/+/#nov-2023-jan-2024

Hope this helps!

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