When I flip break points during editing, The default width for the desktop (with the star) is 992px x 100%, when I click the eyeball to pre-view the default width is also 992px x 100%, but if I click down to the tablet (768px) then click back into desktop, the width changes to 1440px x 100%.
What is going on here and why is the default preview changing without any prompts?
Correct me if I’m wrong, but the default width should be 1440 for both editing and preview, but it keeps flipping around on me.
If you ever manually change the width while you’re working in the Designer, the width will be matched when switching on/off the Preview mode. At any point—both in and out of Preview mode—you can grab the edges and resize your canvas, and as long as you stay within the base breakpoint it will remember that size when switching between the Preview and Design modes.
When you choose different breakpoints while in the Preview mode however, the view will default to the highest value within that given breakpoint. Essentially it clears your “manual” setting and says “on your specific screen, this breakpoint would render at this size”. By default, the base breakpoint (the one with the star) goes from 992px all the way up to ∞ and my guess is you’re using a 1440p monitor—meaning it’s showing that full width after moving from another breakpoint size in Preview mode.
The 100% refers to whether or not it’s interpreting a larger size that can’t render on your specific monitor, not the percentage of the breakpoint. If you were to grab the edges and drag past the width of your display (in your case, 2000px wide) on the largest available breakpoint, then the percentage would go down to illustrate that you’re seeing a “zoomed out” version of the site. This was added when the larger breakpoints were added to allow designers on any screen size to develop websites for larger screens, while still giving you an idea of what it would look like on those larger screens.
Remember, breakpoints consist of a range of sizes (not just a single size) so your style changes on any given range should work across the entire range to ensure proper responsiveness
