My page is not responsive

Design help General
1

Hi, I hope you can help me out, why my page is not responsive.

Here is my site Read-Only:

https://preview.webflow.com/preview/123-cfdd96?utm_medium=preview_link&utm_source=designer&utm_content=123-cfdd96&preview=e8ca43b829ce26a095cbbe198b99f692&workflow=preview

2

Hey @Thoby_DLuna,

So the page isn’t responsive because it hasn’t been setup to be responsive! By default webflow divs/girds etc aren’t responsive, it’s up to you to give it the responsiveness that you require!

You can also see your “Meet the team” section is an image, this means that the team members can’t be stacked vertically on mobile, as it’s a photo!

I would also recommend setting some side padding to ensure that on mobile the text isn’t touching the edges of the screen. :slight_smile:

3

Thanks for reaching back! I’ll change the meet the team section. However, how can I make it responsive then?

4

I also wanted to replace the “meet the team” section with a background video. How can I do this sir?

5

Everytime I change it to a new “display mode”, all my CSS styling is gone.

Screenshot 2024-01-16 at 4.20.20 PM
Screenshot 2024-01-16 at 4.20.20 PM1584×1240 84.4 KB

Screenshot 2024-01-16 at 4.20.27 PM
Screenshot 2024-01-16 at 4.20.27 PM1896×1474 209 KB

6

Ah so it looks like you’ve set the styles on the largest breakpoint at 1440px and up (apologies I didn’t spot this earlier).

By default all webflow styles “flow” from the desktop base breakpoint (shown with the asterisk at the top) and down or up, but not the other way. So CSS style changes made on desktop will flow down to mobile, but mobile changes don’t flow down to desktop.

This also goes the other way, so changes made on desktop flow upwards to higher breakpoints (the custom ones which are set) but not down. You want to alway be editing in the desktop breakpoint for styles like that! Hopefully this makes sense!

This article here will be very helpful for you!