Website looking good on imac however it is all wrong on macbook


I am new to webflow and have began to make a website this week.

All seemed to be going well with the design on my imac however as soon as i went to my macbook:

The boundaries I have set for the width of the page have not worked and now the design is pressed against the edge.

Some of the content has ended up on top of one another and not where it is supposed to be.

I have tried to fix this via youtube videos and online forums but I just cant get my head around where I am going wrong.

I will include pictures and a link to the website.


So there are a lot of ways to go about this, but typically a section will have a container element centered within it that has a max width and some left and right padding to prevent content from touching the edge of the window on smaller screen sizes.

For instance adding a width of 80% on your inner section 4 class produces this result:

This is fixable with your current setup, but for consistency I would recommend standard section, container, row classes that you use across your site to control the width of content on different screen sizes.

Taking a look at some of the free Webflow templates and the way they are structured would be a good place to start:

Thank you very much, so for the sections; should I set their width to 80% and place my container in this then?

@Eoin_Bolger that was just an example, you kind of have to decide on your own what type of padding you want on your content.

The standard setup for me is:

Section > Container > Row > Column(s) > Content

Again I would look at some of the sample templates webflow provides, that should be a good place to get started, for instance:

You can also look at some of the popular frameworks like Bootstrap ( to see how they set up their sections, containers, rows, etc…

Thanks again, I will look at the templates and work from there.