Streaming live at 10am (PST)

Need help with layout asap! (thank you)

Hi guys,

I’m having a huge problem with my website, I designed the site using a large monitor plugged into my 13" apple macbook, as you can see everything on the monitor looks fine, I have made the website fully responsive using the monitor.

However! when I try to edit this website using my Macbook 13" the layout changes? I have made the website for all desktop sizes using my monitor so why does this happen? I have published the website and I am panicking I need someones advice on this.

So basically, My website looks fine on all screen sizes when I am using the large monitor to edit, however when I switch to my macbook 13" to edit website the layout goes all strange on me!

The screenshots which have the wrong layouts are the ones where my logo sits half outside of the nav bar.

@Noah-R, Thought you might be able to help on this one! (you’ve helped me before)

the breakpoints for the devices don’t represent a specific width value, but a range. For instance, the breakpoint between Desktop and Tablet devices is set at 992. So you need to make your design work (be elastic) between 992 and above. You can drag the viewport to shrink it to address this when you’re on a smaller computer.

@vincent Thank you for reaching out so quickly, sorry to be a pain but I am pretty new to web flow, in fact this is my second website design, so could you explain this easily enough that a baby could understand :joy:

Forgive my lack of knowledge on this!

Don’t be sorry for anything :slight_smile:

If you’re not at all familiar with responsivity and how to address breakpoints, I could explain here but I think it would be better if you were taking some time to watch the basic tutorials.

1 Like

I’ve watched all of Webflows tutorials, I think there is a slight misunderstanding maybe :thinking:

I have designed the website using a large monitor, I designed the website so that it is responsive for all breakpoints. (desktop to mobile)

However, when I open the website builder using a smaller device (macbook pro 13") the layout of the website changes? I think this might be some kind of bug? it’s really hard to explain without me filming this.

I am going to film the issue and post it in this topic.

(ive filmed it but i dont know how to upload mp4 video to this chat :expressionless: )

You have to understand how different units work if you want to make responsive sites (obviously you want that). To take your navigation as an example - you are using percentages to set your navbar height. These percentages are taken from the viewport height. It is getting smaller (small macbook 13) but your logo image stays the same vertically getting out of the navbar. Set your navbar height in pixels, or rems or whatever.

To see how your design will work on different devices make sure to test it by making webflow designer window smaller - both in width and in height.

edit: there is no need for duplicate topics, mate. And this is not a bug.

Hi guys,

I’ve written about this issue on another topic of mine but I need advice fast so I figured I’d publish a video showing the problem.

Link to video -

Help would be really appreciated! @PixelGeek @webdev @WebDev_Brandon @shokoaviv @vincent

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

What I wrote before concerns the rest of your problem. Do not set your heights in relative units (%, vw, vh) if you don’t want your layout to behave unexpectedly or test everything by resizing your browser window.

What your saying makes a lot of sense, I appreciate the help.

Cheers, mate.

1 Like

Just a counter question to this, I can still set my section heights to VH though right? it’s just the child elements within this section that I shouldn’t set to % etc if I don’t want them to react unexpectedly?

Well it depends on what you are after. Generally it is discouraged to set heights for elements when their content could depend on resolution (for example you may think that it is plenty of height for your two paragraphs, title and a button to fit but then someone will open the site inside the resized browser window and your button is outside the container, oops!). You may experiment with minimal height though and see how that looks.

General advice - do what you want, and after that - test-test-test.

1 Like