Streaming live at 10am (PST)

Mobile Landscape on Device is laying out different than webflow preview


#1

Hi there!

I’m building my first basic page in webflow. It looks fine based on the previewing from within webflow, but when I actually look at it on my iphone X, the hero section jumps to the top. WEIRD! What was my mistake? Here is how it appears on my phone, and my webflow link is below.

Thanks, Brynn


Here is my site Read-Only: https://preview.webflow.com/preview/brynns-creative?utm_source=brynns-creative&preview=b0f973e78bddba8ff6df20cf24db4750&fbclid=IwAR3V4w2_Yv2bR5uBbtsHJ1j_rcZ0525rjUZAS7qdWG25HdiSUcjhkSYBNiU


#2

Hello @BrynnEliz

I think it’s because you’re using 100VH and the content is too much for the screen size.


#3

Hello @BrynnEliz

There are a couple of things that are affecting this:

  1. You’ve set your hero section to show 100vh and that means that all the content inside can only take that space to be shown and because you have a few elements with certain height that exceeds that 100vh view everything clutters.
    Solution: Try removing the 100vh setting for mobile devices and look how it looks.

  2. The height of you’re different elements are not taking into consideration the right spacing between them because it’s not set properly:

You have this text for example that has size of 100px but spacing of 20px which contributes to this behaviour.
Solution: Give the correct spacing to your text elements to show certain space between them.

I hope this makes sense and helps.


#4

thank you! that worked :slight_smile: really appreciate your help!