Responsive site not working on mobile

Hey, so on the mobile portrait and landscape view of the products page there’s either too much space until the first product or the bottom overlaps the newsletter section. Can’t solve one without messing up the other.

https://preview.webflow.com/preview/mana-moment?utm_medium=preview_link&utm_source=dashboard&utm_content=mana-moment&preview=666d6c9225dbf864e85b7198635826fd&workflow=preview

actual site; https://www.manamoment.com/

Hi there,

You should set every “Height” to “auto”.

The “height” in your designer tool isn’t the same as a mobile phone. Your elements in the blocks with a set height are probably bigger than the set height you used.

Hope this works!

Cheers,

Max Zijlstra

1 Like

Hi! I noticed there are few things that are contributing to the large gap.

  1. On “Section 4”, there are a set height for all break points. If you reset all of them to Auto, this will reduce some of the space. Make sure you reset all of the height on all breakpoints because the height on the larger breakpoints cascade down and will still mess with the mobile views.
  2. Now the page should look okay except the smallest mobile view. I did notice there is a pretty large Margin set on “item-wrapper” in this breakpoint (currently it’s set to 150px, huge!) . So I suggest maybe consider reducing it to a smaller number.

Let me know if this helps.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.