Making my website responsive when zooming out

Been creating a website for my company for the last few weeks and am steadily learning how Webflow works!

As a last step before publishing my website, I would like to make sure that all parts of my website are responsive, of course.

When zooming out on my website (desktop), my whole website cramps into the same place.
For example, the headings become stacked onto one line instead of keeping the same line height I have specified in the styles.

For a reference, please see my read only-link and zoom out (CTRL+Scroll down): https://preview.webflow.com/preview/nudana-web?utm_medium=preview_link&utm_source=designer&utm_content=nudana-web&preview=46470dd29d94d828840d8ba1bc1decdb&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @oscarlord I’ve been through this and what I have learned is that you should use site-wrappers (that’s what I call them). Site wrappers are something that that have a fixed padding and it’s both left and right margins are set to auto, that way it keeps the content center aligned, even on larger screens.

So the way to use this is when creating a section you can just first create a div and then give it the style of site-wrapper and then put elements inside that div.

Also for texts you can give them sizing of rems instead of pixels as rems resize when the browser settings are changed, you can do the same with line heights as well.

I hope that helps, do let me know if you have any other queries.

Hi there !
If you are new to webflow and to website development in general I highly recomand you to follow the courses at Webflow University, it’s free and give you so much tips aside Webflow about how to order your html and make your websites responsive.

But basically what you want to do is to restrain your content in a “container” so for that you need to

  • Create a div that wrap all of your section content
    image

  • Had a flexible width in % or vw to it, for responsiveness on smaller device
    image

  • Had a max width in pixels or rem, so it will restrain the width of your section for larger device
    image

  • Choose margin Auto to center it inside of your page
    image

If you want to go further and make it more responsive (in fluid design for example) and more structured you can also use a pre build css library like Client first library

Hope it helps