I built this website (http://abq-d2d-helocloan-1164.webflow.io/
http://abq-d2d-autoloan-1163.webflow.io/) and it looks good on the Webflow phone view:
But on an actual phone, the Opacity Section is overlapping my first section of text:
Any idea why this is happening and how to fix? Not sure if it has something to do with the Z-Index, but haven’t had this problem in the past where things appear different on phones from what I see in Webflow.
Hi @chrisgreer33, thanks for your post, is it possible for you to share the read-only link to the site?
One more thing, I tested on iphone 6 and am unable to see the same issue. In addition to the read-only link, can you tell which mobile device and mobile browser you are using?
I am happy to take a look 
Cheers,
Dave
Here is the read only (https://preview.webflow.com/preview/abq-d2d-helocloan-1164?preview=4f98de23315cc46f775168a748550f04).
I’m using iPhone 6 Plus. We also tested on a 6. Using Safari.
Hi @chrisgreer33, thanks for the link and the confirmation. I am taking a look at the site
btw, here is screenshot from iphone 6 plus on my end:
I will get back with my own findings soon
Cheers,
Dave
I used to run into this issue too. Whenever I size for mobile portrait, I learned to no use height percentages due to the different size phones.
Either use a set pixel height OR use the “vh” measurement. You can type in “60vh” into the height. This will make the div 60% of the screen height and you can keep the div set to position:static
Try these steps and let me know if you’re successful. 
Sorry Dave … I gave you the wrong read-only link: https://preview.webflow.com/preview/abq-d2d-helocloan-1164?preview=4f98de23315cc46f775168a748550f04
Hi @chrisgreer33, thanks for waiting, I was checking out the site design, and thanks to Webflow expert @sabanna for spotting the immediate issue, which was that you have the Hero section set to 60% height on mobile portrait.
Try changing that to 100% on mobile portrait and republish. Then check again on iphone to see if the problem still exists.
Cheers, Dave
That fixed it. Thanks so much @cyberdave and @sabanna
Only thing, when I make it 100% height, I get a very tall hero photo. Is there a way to shrink it down (there is plenty of picture on the sides left over) without causing the same issues?
Hi @chrisgreer33, one thing you can try, is to go to the Hero Section in mobile portrait mode, and play around with the background sizing. See for example:
The image is set currently to cover the Hero Section as a background, so increasing the height of the section will also increase the background height of the image. You can anchor the image to the top as shown above, and then adjust the background image height of the image to suit your need.
Does this help? Otherwise, to do it differently may require some structure changes in your Hero, Opacity and White sections. Cheers, Dave
I’ll play around with that Dave. Thanks so much for the guidance as always.
I don’t have the ability to change the height based on percentages; only pixels. Is there a step I’m missing?
Hi @chrisgreer33, click in the background image height field, and then type in “80%” and press enter. Then you will be in percentage unit of measurement Try that and let me know if you have any issue
Cheers,
Dave
Dave I made the adjustments, but I’m still getting the same issue (see below) when I go to mobile.
So I adjusted to move the White Section down and then I end up with a bunch of dead space.
Why by setting the Hero to 100% in mobile and then shrinking the image to 70% is it leaving all the extra space in the hero section?
@cyberdave and @sabanna …
I’m still seeing the issues on Apple iPhone 6s in both landscape and normal with the overlapping. If I set the hero to 100% I end up with a bunch of white space. If I keep it at 70% (or so), I get overlap. Weird thing is I don’t see the issue when I check it in Webflow’s landscape or phone view.
Not I understand what issue do you mean, sorry.
If you want that semi-transparent section stay small, do not let row inside of it “fold” on phone view.
How do I keep it from “folding”? I don’t even know what that means.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
