â–Ľ
Streaming live at 10am (PST)

Breakpoints and Resolution Issues

hello! I am new to designing and developing websites on my own, but I have designed a website in Adobe XD at 1980px and am using that as a template to design in Webflow. My issue is that the designer automatically makes me design the page at a 1080px resolution, but when I click on preview mode it switches to 1280px (the actual resolution of my Macbook). This has caused a lot of responsive issues, and I am wondering if there is anything I can be doing differently or better to make sure my design remains responsive but to also design in the resolution that I would actually be previewing in…


Here is my site Read-Only: https://preview.webflow.com/preview/indiart?utm_medium=preview_link&utm_source=designer&utm_content=indiart&preview=3632796586d66e1d50345a32273c5c80&mode=preview

The largest breakpoint in your project has a min-width of 992px. If you preview the page, it may show the page at the widest possible width of your browser.

Keep in mind, that users will view your page at lots of different devices and sizes. If you want to keep those characters in a specific constellation, you will need to encapsulate them to keep their size and proportions!

2 Likes

The way Webflow handles breakpoints is a bit differently than other methods - especially with the introduction of the new larger breakpoints. Instead of mobile first (designing for small screens first and adjusting as things get more breathing room) or desktop first (designing for large screens and adjusting as things run out of space), Webflow has a “base” breakpoint that cascades down to mobile devices and - if needed - up to large displays.

I’d strongly recommend you take a look at the Introduction to Breakpoints lesson in the Webflow University, but I’ll do my best to explain things a bit more concisely below.

Webflow & Breakpoints

When you start your project, you’re designing on the base breakpoint. Until you make any changes, this layout is the same for all screens. It may look like 1080px in the designer since this is the amount of space it has after the space occupied by the toolbars (you’ll see in my example below, I actually see the base breakpoint as 1452px), but it will get infinitely larger or squeeze as tightly as possible while following the rules you’ve established.

Adding Responsive-ness

When you’re ready to adjust your design for small screens, just click the adjacent breakpoint selection icon (in this case, tablet) and make changes as needed.

image

All of these changes cascade down (this is where the C in CSS - Cascading Style Sheet - comes from) to the lower breakpoints. This is essentially the desktop first method and was the way I learned to code websites before mobile devices were common place. By default, Webflow includes 3 smaller breakpoints that should be plenty to get your website looking good all the way down to mobile devices.

Larger Resolutions

As I mentioned initially, Webflow recently introduced the ability to add up to three larger size breakpoints that can be enabled by clicking on the 3 dots to the left of your main breakpoint.

image

These work the same way as the included smaller ones, only they cascade the other way - up from your base breakpoint. This means that once you find a design doesn’t work for a larger display, just add a new breakpoint at the necessary resolution and make your adjustments. Keep in mind that it isn’t possible to remove them after they’ve been added, but adding new breakpoints doesn’t change the design until you override a style within that specific breakpoint.

Previewing Projects on Larger Displays

If you are working on a project and want to get an idea of how it responds to things on larger screens, just use the controls to the right of your mobile breakpoint. In my example below, I’m previewing my canvas at 1800px wide (348px wider than what’s shown be default) which is scaling things down to 80.7% of their actual size.

image

By default, if you create a larger breakpoint that’s at a higher resolution than your working monitor, it will scale your screen automatically to accommodate. This isn’t a perfect system by any means, but I’ve found that it does a good enough job simulating larger resolutions. If at any time you want to get back to your normal scale, just adjust the settings accordingly - keeping in mind it may switch your breakpoint to reflect the new resolution.

Your Situation

In your case, adding some higher resolution breakpoints can help the design adjust for larger displays however it’s important to remember that web design should never be done in absolute dimensions. I strongly recommend using relative dimensions (%, VW, VH, EMs, etc) along with either min or max width values in absolute dimesions instead as this will help your design remain fluid - even if it wasn’t necessarily designed to work within a specific resolution.

If you have a specific issue that you’re running into on your design, include a screenshot of your design reference if possible or explain the desired outcome and I’d be happy to walk you through the necessary changes.

3 Likes

thank you so much for your detailed explanation, it has really helped me understand better how both the web and webflow work with responsive design! I feel a lot more confident about building in Webflow now…as of now I don’t have any particular issues I have just been trying to figure out how to use %s and EMs etc. If I run into another problem along the lines of responsiveness/breakpoints I will for sure attach a screenshot! Thank you again!

thanks a for this expla, but there is one thing i’m not getting:
my macbook pro 13’ should have 2560px width but this doestn fit into the breakpoints, because when i take the breakpoints as measurement my screen is much smaller…

i think i’m not getting the measurement behind it…

can someone explain this to me please? :smiley:

This might have to do with the scaling you have set on your laptop.

If you head into your Display settings, you’ll probably noticed that you have the “Scaled” radio button selected which allows you to modify the size of your UI. If you choose “Default for display” you should get a more accurate representation—however this isn’t as desirable for most folks, especially on smaller screens, as it can be hard on your eyes to focus on such small UI elements.

If this isn’t the case, I’m not sure why you wouldn’t be seeing the full resolution, although keep in mind that your browser is able to have it’s own zoom level which may have been accidentally enabled.

1 Like

thanks for the reply.
i guess i didnt explain well, what my issue is.
its the following:

when i set the breakpoint to 1280px and edit something, than it will appear on the published site on my laptop.

when i set it to 1440px and edit something than it will not appear anymore on my laptop but on bigger screens.

-> thats means my laptop is considered by webflow to be between 1280px and 1440px right?

but why than does my mac show me that my screen is 2560x1600?
his is just a technical confusion for me…

Did you happen to check your display settings on the laptop? I’m still thinking that you’ve scaled the resolution to make the UI elements larger—which in turn will affect the resolution you see both in the Designer and on the live website.

Based on your screenshot it looks like your resolution should be somewhere around 1664px wide (since you’re viewing the 1280px breakpoint at a zoom of 76.9%) so I’m not too sure why you’re not seeing changes made on the 1440px breakpoint. If possible can you share your read-only link so I can take a look at the site?

Hey Daniel,

your macbook probably has a retina display, which means that even if it writes that it has a resolution of 2560x1600px it actually scales it down to - for example 1440x900px (see image attached) with double the pixels density - which provides extremely sharp image quality. So your actual resolution which webflow uses is 1440x900px.

I hope this clear things up.

Cheers

2 Likes

ouh thank you so much. my mac book has indeed a retina display and i didnt know that it scales down…thanks for this clarification!