Remove White Space on mobile portrait view caused by overflowing elements

Design help General
1

Hi there,

For a reason I can’t explain, I’m having a white space on the right of my website’s screen that I can’t seem to get rid of - at least, not by tweaking with my elements’ width, none of them being set outside the normal proportions of the site. This white space appears on the desktop view when scrolled horizontally, and is here at all times on the mobile version (see screenshots below).

|380x100%
|380x100%767×659 90.1 KB

I did played around with the perspective of 3 of my elements, the “Allyson Header”, adding a Rotation Z -1° to make them tilt.

Here is my public share link: Webflow - Floravere

Do you know how I can get rid of this space and get the full width of the website back to what it should normally be?

Thanks,
Jeremy

2

Hi @jeremysteinberg

Did you already fix this issue?

I’m not able to scroll horizontally and i can’t find any overflowing elements on your site floravere.webflow.io

3

@dharmanode thanks, no I don’t think it’s fixed yet. Strangely enough the white space is really visible on the mobile version of the site. You can either check on floravere.webflow.io or floravere.com directly.

Would you be so kind as to check again as I just republish the site as it were before (that is, with the rotated headers).

Thanks for your help,
Jeremy

4

Strange, i checked on pc mac & phone and I can’t scroll horizontally.

What browser & operating system are you on?

5

I’m on Chrome and mac air OS X 10.9

6

Could you open an incognito window and open your site to make sure that you’re not seeing a cached version of your site?

7

I just did thanks. Seems like there is no white space on the desktop view.

But this is what happens when I check the website on mobile:

  1. When I first get on the site, there is no extra space on the right (see photo)

416×695 269 KB

  1. But when I scroll right, the white space appears and remains:

418×706 270 KB

8

I’m seeing the same thing. Weird, i’ll look into it and let you know if i find something.

9

Thanks a lot @dharmanode, your help is much appreciated here :wink:

10

I think i found your problem:

The text: Image by maria lamb on mobile portrait view seems to be overflowing. This can easily be fixed by positioning it more to the left :slightly_smiling:

Hope this fixes it!

1 Like
11

Hey @jeremysteinberg if you set the “hero section” to overflow: hidden, that should resolve the issue :smile:

12

Omg @DharmaNode you’re right with the link this is what caused the extra white space on mobile, thank you!

@waldo, thanks a lot for your help. Should I set the overflow on hidden on the mobile version and under only, or everywhere?

Thanks to you 2!

1 Like
13

Hey @jeremysteinberg it looks like you can add the overflow: hidden setting form desktop down on the hero section and you should be good to go :smiley:

Great work @DharmaNode & @jeremysteinberg :smile: glad that we could get this resolved

2 Likes
14

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