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.
