This guide equips you with using breakpoints to design web pages that flawlessly adapt to any device. We will explore how to leverage breakpoints effectively to preview and optimize page designs for XS (mobile), SM (landscape mobile), MD (tablet), LG (desktop), XL (extra-large desktop), and XXL (ultrawide desktop) breakpoints. Additionally, we’ll uncover the functionality of live previews, empowering designers to assess page performance in real-time across different breakpoints.
Preview while editing
Within the page editor, you’ll find a selection of breakpoints representing different device sizes. By selecting any of these breakpoints from the dropdown menu, you can visualize how your page adapts to various screen sizes while continuing to edit seamlessly.
Upon entering Creative Studio, the default breakpoint selected will be LG (desktop). Choose from:
- XS (mobile): Ideal for smartphones (less than 576px wide).
- SM (landscape mobile): Perfect for landscape-held phones (576px to 767px wide).
- MD (tablet): Caters to tablets (768px to 991px wide).
- LG (desktop): Standard desktop view (992px to 1199px wide).
- XL (extra-large desktop): Larger desktops (1200px to 1399px wide).
- Ultrawide Desktop (XXL): Ultrawide screens (wider than 1400px).
Live preview
For a more dynamic assessment, utilize the live preview feature. By clicking the “Preview” button in the top right corner of your creative studio, a new tab will open in your browser, showcasing your page as it would appear in a live environment. This preview mimics live functionality, enabling you to interact with elements such as links and forms.
Within the live preview, you’ll find a similar dropdown menu allowing you to switch between breakpoints, offering a comprehensive understanding of how your page adapts across different device sizes.
If you have any questions, please contact us on [email protected].
