Adjusting Breakpoints & Limits
Last updated
Last updated
Breakpoints are the screen widths at which your page will switch to a different view. For instance, if you designed your webpage for just desktop and mobile, there will be 1 breakpoint at a scale in between the two frames. Quest automatically determines this for you but we’ll go over how to adjust exactly when to display which design layout if you’d prefer.
When starting your page design, you will begin working on it in Figma. Depending on what devices you need to support you may want to create frames for each of those designs. For instance, you may want to support Desktop & Mobile device views for the page. In that case you’ll want to create those final designs as two frames in Figma. You are not limited to two frames but can use 1 to 5. We often recommend using 3 for mobile, tablet and desktop views and by using the default frame size for each recommended by Figma at 320px, 768px and 1440px accordingly. When you import your designs Quest will automatically create breakpoints at a set pixel size between each frame you import but you can easily adjust that as we’ll show you later here.
When bringing in your design, Quest will set limits on how much the page will be responsive making it easier to manage pages without tweaking too many elements to get it looking good.
To see the limits and make adjustments, click on the Breakpoints settings icon on the left-side of the device view icons. This pop-up will show you the minimum and maximum you page will apply responsive settings (if you have any setup) before cropping in (minimum) or revealing pure background color (maximum). For instance, if you have a desktop view set to MAX 1500px wide, and you drag your browser to 1600px, you will see 100px of padding around the entire page on left and right (50px each side).
In many cases you can leave these settings as is. If you feel like things are getting too close together or too far apart in certain browser sizes or devices, you can make adjustments as you see fit.
Quest automatically creates breakpoints based on the frames you imported. This is determined by best practices and also average sizes. If you start testing things locally and feel like these breakpoints are not as you wish, you can tweak them by going to the Breakpoint panel.
There will be a breakpoint setting in-between each frame you imported. To get there, first click the Breakpoint settings icon at the top. Then you can get to the individual breakpoints between devices in two ways. You can press on the tiny icon (vertical line) that appears between each device icon at the top or you can press on the link in the Responsive view on the left or right side of the slider. See the image below as an example of this.
Breakpoints and limits are really there to complement setting up your page for responsiveness and are purely to be adjusted based on preference.
After you update the breakpoints, click Preview to verify your page behavior for different screen sizes.
