Trouble with mobile responsive design

Hello.

I have very nearly finished a site which has taken me too long…

Anyway, now on mobile and sections are overlapping into each other. I just need to know why and how to fix, please. I have tried and tried but with the amount of sections I have it’s so easy for even myself to get lost.

The video below has no audio. But it shows how it’s meant to look and then i re-size to a smaller mobile device and you’ll see what I mean.

Thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/bare-essentials-627d97?utm_medium=preview_link&utm_source=designer&utm_content=bare-essentials-627d97&preview=df5d8be4e707953166ad20bc223738dc&mode=preview

That “Promo Video Section” (which is used within combo classes on the page) has a defined height of 1100px—so as your screen gets narrow the text is pushing itself out of the bounding box and affecting your adjacent sections:

image

The other sections that are causing a problem are all at their own defined heights as well (although they seem to be different values) so clearing these styles and keeping the height to “Auto” will fix the issue. If you’d like the sections to be at least that tall, just move the pixel value to to the min-height field:

image

I’m not sure if you’ve got any other instances of set height values on the page, but hopefully that should help give you a place to look in the event any other sections are causing issues :+1:

1 Like

This.^ “Auto” is the correct answer. When I’d went from Dreamweaver over to this. These are some of the things that I had to learn.

As Mikeyevin has already stated. “Auto” will resolve your problem. You can keep the height on the other format sizes, as long as it shows that way, when you or others are viewing the website. But in most cases, “Auto” is the best route to go. Just make sure that those fixed heights are looking that on each monitor size.