Streaming live at 10am (PST)

Responsive design in different size browsers

Hi,
I am trying to scale down my browser in the toggle preview and nothing seems to stack. eg. I have two columns (left text and right image). The columns remain next to each other and everything is really tiny. Everything looks fine when I preview it in tablet and mobile and will response how I want it to.

How do I make the columns stack like the mobile version in a small desktop browser, or will it do that if the mobile size does?

I hope that makes sense, basically just having issues with the desktop browser when I scale in to be really small.


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

Hey Emma, welcome to the community!

If you could share the read-only for your website, that would be extremely helpful for us so we can take a deeper look at it.

From your description, I suspect you’re having trouble with the column settings. They won’t rearrange themselves automatically, you need some sort of rule to make that happen . I would recommend you to look into the articles in the Webflow university that talks specifically about columns.

It might be worth to you checking out two other subjects:

  • Flexbox layouts
  • Aditional breakpoints (Webflow added this feature a few weeks ago, where you can add more breakpoints to the website so you can have better control over how things look across multiple screen sizes)

Hi Jeandcc,

Thanks so much for your feedback already!

This is the link: https://preview.webflow.com/preview/kyles-website-architecture-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=kyles-website-architecture-portfolio&preview=d3a85e1bfe4a3d0581b0acbcfa75ee59&pageId=5ec7876d0a860fff2b6aba15&mode=preview

1 Like

Hi @Emma_Culbert,

Thanks for providing a ‘Read-Only’ link.

As Jean mentioned there are further column settings that will enable you to adjust their layout based on different breakpoints. Have a look at the image below to see how to access those settings. (looks like you’ve already discovered them).

The columns will stack as per the various viewport widths (as per mobile/tablet screen size) when you change the browser size.

As a side point - use of columns is kinda the ‘old way’ we used to do things. A much more powerful and flexible method is to use Flexbox or Grid (responsive by default), however, there is a bit of a learning curve to get to grips with fully using it.

Also, I note that you are using specific pixel settings on some elements, just be mindful that when designing responsively, use of specific pixel dimensions can result in unexpected results, generally we try to use responsive units like %ages, VW/VH, rems/ems etc (A whole lot of terminology, basically meaning responsive)

Can I ask are you trying to add pages to your existing website?, change your website to Webflow platform? or just learning?

Keiran