Streaming live at 10am (PST)

Empty space on right hand side of my screen (mobile and Ipad size)


#1

Hi Guys,

Apologies to begin with this noob and amateur problem, unfortunately i havent been able to figure it out.

When my site is in mobile view or Ipad view, it not only has empty wide space on the side. When viewing on my mobile phone, I can zoom out and zoom in which ruins the user experience. It will be great if anyone can point me in the right direction or previous article to read on a potential solution.

https://preview.webflow.com/preview/gideons-groovy-project?utm_source=gideons-groovy-project&preview=44e3e733478269733eb23a1d3b9b5d8c

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi there,

So for the zooming, you can disable this by using custom code. I insert this into the head of most of my sites.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

As for the wide space, it’s likely you have an element set with a pixel width. Scroll around and see if you can find out what element it is and change the style.


#3

Hi there.

I haven’t looked at your shared site, but you may find that in the mobile and tablet versions you have a desktop version element that has not been reduced in size that is causing this; could be an element that has a locked width that is extending beyond the mobile device screen widths.

If that’s not the case, a fix that ‘should’ sort this out (or more to the point, control it - the issue will still be there but is being cut off) is to add the following CSS code to the Head Code panel in the Custom Code part of Project Settings.

body, html { overflow-x: hidden;}

Hope that helps.
Grant