Responsive issues with my site on mobile devices

Hi guys

i am having issues with my site being displayed correctly on mobile devices, phone and tablet.

Specifically the lower three sections on my site. their is a lot of overlapping happening whenever i view the site on a tablet in landscape mode. on the phone, in portrait mode i get similar issues.

i have a bunch of screenshots below taken from all these devices. Ipad2 (running Safari and Chrome), Nexus 7 (2013 edition, running Chrome) and Nexus 4 phone (running Chrome).

my public link is:
https://webflow.com/design/yspn?preview=70171b5ecf9fc0043924a9b867032e43

ipad2 running Safari

ipad2 running Chrome

nexus 4 running Chrome

nexus 7 running Chrome

any idea guys??

thanks

Hi,

Your background image on .frontpagehersection is 1.88MB large. Decrease it below 200KB so it appears on iOS devices correctly. It might be the reason it’s all broken on smaller devices.

brought the size down to about 500kb via TinyPNG.
Made no difference.

i believe its something to do with the setup of the bottom two sections. something in the coding that is causing it to appear all muddled on mobile devices.

iOS limitation is 250KB so it’s safe to downgrade to less than 200KB. Try to resize it a little bit. Once it is below 200KB we will know if this was causing the problem or it is somewhere else.

ok changed pic, now down to 180kb.

same problem.

I think it’s because you are using % for height of sections. That may work on Desktop, but on smartphone it’s wiser to use PX for height of sections because you get full control of the exact heights you need. Especially when content gets longer on mobile views. What happens is: Your section is checking height of mobile device (which may be only 500 px high), but the content may need 1000px!

1 Like

Same thing happens when I make my browser window smaller. See:

BINGO ! That’s it !

It was the section height % that was the problem, changed it to auto, and its all good now.

On the topic of % vs px for mobile, i think this is why my site is jumping around when you scroll the site either up or down.
I have been in discussion with @mat at webflow support about this, and i think @rowan u have found the solution.

Saying that though how does one set the hero container (at the top of the page) to be 100% height without using %??

UPDATE: ok it seems that the problem still exists on the iPad 2 in landscape mode. Portrait is fine. This issue applied to both Safari and Chrome.

Is this an iOS issue?

UPDATE #2: it seems that the ipad2 safari is using the desktop mode when displaying in landscape view. any idea why this is happening?? i have fixed the overlapping issue.
So now i have just two issues left to fix.

  1. Ipad showing landscape view in webflow desktop mode.
  2. Snapping issue still occuring in Chrome as i am still using % for the hero body section. What alternative could i use that is both desktop and mobile compatible??

Hi Amreet_Gill, I am curious to see if you have fixed all your problems including update 1 and 2 since I face similar issues.

Thanks

Mitch