Hi All,
As you can see from the photos below, the div container is overlapping my nav list, one device is on a Samsung S4, and the other is an iPhone 7 - however it looks completely fine on my Samsung s10 and on the Webflow Mobile layout.
Does anyone have any ideas what could be wrong?
Here is my site Read-Only: https://preview.webflow.com/preview/josephgmedia?utm_medium=preview_link&utm_source=designer&utm_content=josephgmedia&preview=94ac89fb289351c7e139f25a540707dd&mode=preview
Since this is happening on a live website and not in the designer please post a link to your published site so we can have a look…
oh and you should test it in the safari developer mode using responsive layout - once you load up your published page you can see what property causes your dive to overlap
Hi there @IVG, the live website is josephgmedia.webflow.io
I have tried in Safari Developer also and can’t replicate the issue my two friends are seeing…
I have also noticed that on loading, one of my image files tiles across the page before the page loads - a friend has also noticed this too. Would there be a reason for this?
To answer your last question - that is because you have a backgound image selected with tiling for the “body” element - remove that and it will go away…
The first issue seems to be caused by the following - since your nav container is centered relative to the viewport and the logo is fixed using a margin, then when a screen gets to be certain size it will overlap…
so a solution would be to put the logo and the nav in a parent div that is positioned how you like, but inside the parent div, the logo and the nav are positioned responsively so they will not overlap but shrink when needed… - using VH/VW or %'s
oh and it looks fin in the webflow editor because it is always has your viewport hight more then it is on your mobile to recreate the behaviour open your website in chrome responive designer and make the viewport shorter…
