Pixel Perfect

Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.

Let’s get into it.

Key Takeaways

• What Is a Breakpoint?
• A breakpoint = a screen size range
• Websites adjust layout based on screen size, not device type
• Editor 2.0 Breakpoints
• Three default breakpoints:
• Desktop (main breakpoint)
• Tablet
• Mobile
• Hover over tablet or mobile icons to see pixel ranges
• These ranges determine when the layout changes
• Why Breakpoints Matter
• There are thousands of device types
• Your site must adapt to many screen widths
• Example: A laptop with a 1000px screen will show the tablet layout
• How Editing Works
• Start with the desktop view (marked by a crown icon)
• Changes to desktop cascade to tablet and mobile
• You can customize each view individually if needed
  

Key Takeaways

• What Is a Layout?
• Layout = how elements (text, images, columns) are arranged on a page
• Layout changes affect containers (like columns) that hold widgets
• Editing Layouts by Breakpoint
• You can rearrange layout independently for Desktop, Tablet, and Mobile
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
• How to Rearrange Columns
• Click a column to bring up a floating toolbar
• Use the toolbar to move columns left or right
• Editing Rules
• Changes made in the main (desktop) breakpoint cascade to others only if those breakpoints haven’t been edited yet
• Once you edit a layout at a specific breakpoint, it no longer inherits layout changes from the main breakpoint
• Tablet and Mobile layouts do not affect each other
• Future layout edits from Desktop won’t impact breakpoints that were already customized
• Real Example
• Move a column in Desktop → change appears in Tablet and Mobile
• Move the same column in Tablet → change stays in Tablet only
• Move the column again in Desktop → Tablet version stays unchanged

Key Takeaways

• What You Can Do
• You can reorder elements within a column (like image widgets) at the individual breakpoint level
• This lets you adjust how content appears on Tablet or Mobile without changing Desktop
• How It Works
• Select an element (like an image)
• Use the floating bar to move the element up or down
• These changes are only applied to the current breakpoint
• Editing Rules
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• If you reorder elements within a column at the tablet breakpoint, that change will not be reflected in desktop or mobile
• The main breakpoint (desktop) will still show the original arrangement
• Real Example
• Move an image down in the Tablet view → only Tablet reflects the change
• Switch back to Desktop → layout stays the same
• Each breakpoint can have its own internal content order
  

Key Takeaways

• Design Panel Layout Options
• Select a container (like a section or column) to see Layout options in the design panel
• The design panel appears on the upper right side of the editor
• On the main breakpoint, you can:
• Set a fixed width (e.g., contain content to 1200px)
• Enable full bleed to stretch content across the full width of the screen
• Layout Behavior on Tablet and Mobile
• On smaller breakpoints, you can control how columns display within a section
• Three layout options:
• Left to right (default)
• Grid layout
• Each column as a row
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
• Changes made to layout settings at Tablet or Mobile do not affect Desktop or each other

Key Takeaways

• What Columns Are
• Columns are containers that hold other elements (like images and text)
• Similar to sections, you can adjust how columns behave at different breakpoints
• How to Edit Column Layout
• Click on any column to access layout options in the design panel
• From here, you can set things like stacking direction (e.g., vertical vs. horizontal)
• Breakpoint-Specific Edits
• Layout changes made to a column only apply to the current breakpoint
• For example, a layout change made on mobile will not affect tablet or desktop
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• But once you adjust the column layout on a specific breakpoint, it overrides future changes made from the main breakpoint

Key Takeaways

• What You Can Adjust
• Beyond layout, you can also customize:
• Margins and padding (spacing around elements)
• Element sizes
• These changes apply only to the current breakpoint
• You can fine-tune spacing and size for Tablet or Mobile without affecting Desktop
• Design Panel Tips
• In the tablet or mobile breakpoints, the design panel shows a small device icon next to each editable property
• This icon tells you where the change will be applied
• Some properties apply only to the current breakpoint
• Others may apply to multiple breakpoints
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints

Key Takeaways

• When to Hide Content
• You might want to show less content on smaller screens (like mobile)
• This helps create mobile-friendly layouts without overwhelming the user
• Important Difference
• Deleting an element from any breakpoint removes it from all breakpoints
• Do not delete if you only want to remove the element from one view
• Instead, use the "Hide on this device" option
• How to Hide Elements
• Right-click the element and select "Hide on this device"
• The Layers Panel will open to show where the element is located
• A hidden eye icon appears next to the element to confirm it’s been hidden from that specific view
• Good Practice
• Use the show/hide on device feature to tailor your design per breakpoint without removing content entirely
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint