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!

1 Like

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.

2 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!