I have an issue that I’m hoping someone can clarify, regarding responsive design using Webflow breakpoints…
Below is a screenshot, which shows the Hero page of our website, at 1440px (which is my laptop res) at Min 100 VH. The NAV bar is Fixed, therefore the Hero section obviously begins slightly under the Nav Bar…
Below the three product buttons, I’ve indicated where the viewport ends with a red zig-zag, according to the Designer. According to this, it appears I have considerable space to add more content… as indicated by the red zig-zags.
But when I look the preview of the page (in the below screenshot), I see that there’s no space at all to add anymore content, as the viewport ends right below the three product buttons.
However, I also notice that it says “1440px 98.6%”…
In the first, Webflow Designer screenshot it indicates 67.6%… So from this, I assume that the depiction of 1440 px in the Designer is 67.6% of the actual size… (No, I’m not a genius). My question is this;
If the Designer is showing 67.6% of the actual size, why does it show more space available in the viewport, below the buttons…? Shouldn’t the viewport end there also?
How do I judge changes accurately if the depictions in the Designer and Preview are “inaccurate”? I put inaccurate in speech marks as there is very probably something I’m missing, which I’m hoping someone can help with.
The way the Designer scales content for smaller screens can be a bit confusing, but it really should only be used as an estimate—with all actual sizing based around a real browser. This was added as a solution to the need for users to design for larger breakpoints (which you’re taking advantage of) on screen sizes that aren’t actually wide enough to accurately display the larger breakpoint sizes.
If the Designer is showing 67.6% of the actual size, why does it show more space available in the viewport, below the buttons…? Shouldn’t the viewport end there also?
The content within the Designer window is what’s scaled here to mimic a larger screen—in which case there would be extra space below your content. Browser windows will take up as much height as they can, so it won’t cut off content if the window itself has the room to show additional content on the Y axis.
How do I judge changes accurately if the depictions in the Designer and Preview are “inaccurate”? I put inaccurate in speech marks as there is very probably something I’m missing, which I’m hoping someone can help with.
As I mentioned, this is really a hacky solution to the problem of not being able to show the entire size of the larger breakpoints on smaller screens. If this didn’t exist, you’d have to scroll horizontally to see the full width of the larger 1920 breakpoint for example, and this would lead to even more confusion as the scrollbar wouldn’t necessarily exist on your live website.
I’d recommend using this Designer scaling as a super rough estimate of what the site would look like on larger screens and always test the site in an actual browser with the actual resolution you’re designing for.
Designer scales only viewport width. It’s height is your browser height. So since your three photos have a fixed ratio they will become smaller in both horizontal and vertical space when your viewport is made narrower, leaving space below them (that you have zigzagged). If you stretch these images to the full width of your browser viewport, they will become higher as well as wider, filling the space below them. That is all there is to it
Thanks Mike, Dram, for your explanations. I get it now, if the Designer only scales VW, then of course…
So can the Designer not be developed further, to scale down both VH and VW for larger breakpoints only? That way we would see a more accurate representation of the larger breakpoints, no?
