Streamlit not rendering well on mobile?

Using Streamlit
#1

Hello, I made a streamlit app for a scouting report comparing different college baseball pitchers.

https://share.streamlit.io/v4gadkari/osu-baseball-analytics/main/huskersdashboard/scripts/huskers.py

My issue is, it works well on laptops, but does not render well on mobile. The plotly graphs are huge and it’s just hard to move around with on my phone. Sometimes the app even freezes in some places. I could set my layout width to normal instead of wide but then the plots won’t render the way I want them to on a laptop. Is this just the sacrifice I have to make? Where it works well in laptop but not as user friendly on mobile?

I did set the pixels of the graphs to a fixed size beforehand because on one of the pages where I have two columns of bar graphs, the graphs were overlapping each other. I don’t know if that has something to do with it because then the graphs are not rendering dynamically or changing with mobile but it is causing an issue.

Thanks

#2

Hey @v4_gadkari,

First, welcome to the Streamlit community! :tada: :partying_face: :tada: :star2: :star2: :partying_face: :partying_face:

You’re the same person who posted on reddit yes?

Can you link the GitHub repo that you’re deploying from? As we were discussing in the reddit comments you fixed the width of your graphs. If you make the width flexible then when viewed on a mobile you wont have these issues your running into!

Happy Streamlit-ing!
Marisa

#3

Hi @v4_gadkari !

I see this issue recurring from time to time, for example here: Plotly not responsive mobile screen - #2 by andfanilo

Are you using st.plotly_chart(fig, use_container_width=True) to have your plotly charts adapt to their container size, so that whatever mobile/laptop/landscape/portrait mode/inside 3 columns… you won’t have to fix the width by yourself

Hope this helps you a little :wink:
Fanilo

2 Likes
#4

Hello @Marisa_Smith

Yes! I am the same person that posted on reddit.
Here is the github repo:

To make the width flexible do I have to use the (use_container_width=True) asrgument that @andfanilo suggested?

1 Like
#5

Hello @andfanilo

I did use the st.plotly_chart(fig, use_container_width=True to render the plotly charts, but I did not pass the use_container_width argument. I will try this and see if this fixes the problem. I definitely did want to add a custom pixel amount though because when I don’t the two columns overlap each other.

Thanks

#6

Hello @andfanilo and @Marisa_Smith

Your suggestion has solved the problem! Thanks for your help! This was my first real streamlit app, so I am slowly picking things up. I now remembers to do this with plotly charts. One question I had was, on mobile do widgets in beta_columns stack on top of one another? This is a small knit pick, but I was wondering if say, on my ‘Pitch Use By Count’ page, on mobile device the radio buttons and the pie chart are stacked on top of one another instead of side by side. Is this streamlits way of adjusting the formatting for mobile?

1 Like
#7

Hey @v4_gadkari,

That’s great glad this helped solve your problem. Yes, the columns do get stacked on your mobile device which is why you’re seeing the radio buttons for that page on top of your graph.

Happy Streamlit-ing!
Marisa

1 Like