Streaming live at 10am (PST)

Solution for wide layout in mobile version


#1

Hi,

When I open my project in the phone I can still scroll to the right to the Desktop width. I found that the lightboxes are still as wide as in the desktop version. How can I fix this so that mobile version won't scroll to the right to the blank space? How to make lightboxes proper size in mobile version? I found a couple related topics in forum, but that didn't work

published in wf hosting

shared link

need your help people


#2

Hi Deneesta,

Are you talking about this?

If so, Webflow has a really handy lightbox feature:

If not, let me know where I can find the lightbox you mean.

Hope this helps :slightly_smiling:

Michael


#3

You have some elements with pixel values in width like "Tour Editor Div" (960px) that causes the problem. You should try finding all the elements that causing trouble and change them to percentage based width or set the max width to 100%. For a quick fix, u can also set overflow to hidden on the body element.


#4

I tried 100% width on the lightboxes it didn't work on the phone. Here's some screenshots from the phone to see the problem:




#5

Hi @deneesta,

This problem appears not because of the Lightbox, but because the whole site has a big overflow.
The reason of that overflow is an element, which you moved to the right side, out of screen view, for interaction.

You can fix it by set overflow:hidden to the column.

Regards,
Anna


#6

Hi @sabanna

Wow thanks. That was it. Got it sorted out. :+1:


#7

Please make sure to mark the post as a solution as to tell the rest of the Webflow Forum that you problem has been resolved. Thanks! :wink:


#8

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