Fix width on mobile

My app slides left/right on mobile. http://13.58.1.217:8501/

I noticed when viewing this app on mobile it does not slide and it fits the screen.

Is there a setting I can use to correct it?

Update my app is hosted here: https://cigar-recommender.herokuapp.com/

Hey @chefnewman,

I just tried the herokuapp link you sent on my mobile device and its working fine, there isn’t any sliding left or right. I’m on Android version 9.

Cheers,
Marisa

Hi @Marisa_Smith

Thank you for responding.

I guess it’s different on the Iphone. See the video here: https://twitter.com/SteveNewmanDS1/status/1334937240221470725

The strange thing is when I open the other app mentioned above on my Iphone it doesn’t slide left/right when opened. After selecting variables and running the app it does shift left/right to accommodate the graphs.

That makes me think that the select box or something else on my app is larger than the Iphone screen width?

Hey @chefnewman

What is the IOS version your running and your phone version?

Thanks,
Marisa

@Marisa_Smith

Iphone Xs Max 14.2

I even tested taking the img out and it still slides here http://cigars-rec.com/

@Marisa_Smith

I removed all of this and it doesn’t slide.

@Marisa_Smith

I did a series of tests eliminating one of each in the above screenshot at a time and it seems like col1, col2, col3 = st.beta_columns([1,1,1]) is causing it to slide.

I need to keep that because on a desktop it looks like the attached screenshot.

Do you know of any way to solve this?

Hey @chefnewman,

Are you using the st.set_page_config(layout='wide') setting by chance? Is that why you need the 3 columns but only use the centre one?

If you remove this then the default app setting will be centered and it looks exactly as you have it (one centered column down the middle, actually I assumed that this was the setting you had it on). When you use the wide configuration it changes from a centered column layout to left justified.

Let me know if this works!
Marisa

Hi @Marisa_Smith

I do have st.set_page_config(page_title="Cigars-Rec", page_icon="💨" , layout="centered")

Would it be any different if I left layout out?

With layout ="centered" and without the 3 columns - it left justifies.



When I use the default layout and st.image(img, use_column_width=True) the image is huge but centered.

Screen Shot 2020-12-21 at 6.40.27 PM

Hey @chefnewman,

OK im finally starting to see the full picture here (no pun intended! :joy:).

So the real underlying issue is that your picture isnt centered (or turns out really big) when you don’t use the columns. BUT using the column is causing a horizontal wiggle when scrolling for people who use iPhones.

So the best way to fix that is for me to get my hands on a minimum working example to I can find the combination of settings that will work. Can you send me the link to your github or post the code with the pictures here so I can try a few things out?

Thanks!
Marisa

Thank you - I will private message you the GitHub because it is private as this is an affiliate site.

1 Like