Need help why this is happening?

Design help General
1

Two weird issues I can’t seem to fix:

If you take a look at my simple 3 row design:
http://rr-mobile.webflow.com/

You will see that when you shrink the browser, between the phone landscape media query, and the tablet media query, you will see the 1st row becomes un-aligned with the others…

I’m having trouble identifying why this is happening?

In the browser - the background gradient looks fine at all sizes…but on my iphone, in landscape view, it looks like it repeats, and should not…

Does anyone have any advice for me?

Thank you for any suggestions!

2

For your first issue, it looks like in the Phone Landscape resolution, you assigned Text Alignment to be Centered (in the Typography section). Since images have ‘inline’ behavior, they respect the text alignment of their parents. It looks like you only did this for column1, column2, and column3 classes.

For the second question, it looks like it’s because Webflow defaults the <html> element to have a height value of 100%. You can actually reproduce that effect in the browser by resizing your browser to make it really short.

You can try adding a custom style to the head section (in site settings) to reset the height of the HTML. Something like this:

<style>html { height: auto; }</style>

3

Wow! Awesome advice - thank you! I corrected both items - I’m not sure I entirely understand the second fix, but it works…