Breakpoints
Last updated
Last updated
Breakpoints are the building blocks of responsive design.
Custom breakpoints allow you to define specific points in your design where the layout adjusts to ensure optimal viewing on different devices. Cwicly makes this process incredibly intuitive and flexible.
By default, Cwicly ships with 3 breakpoints. Desktop which is the base breakpoint, Tablet and Mobile.
To switch from one breakpoint to another, you can either hover and click or click and drag from the edge of the canvas.
The Responsive Selector allows you to change breakpoints from the top bar of the editor.
In the editor, find the Responsive Selector icon in the top bar .
Hover and click the required breakpoint in the dropdown.
The drag visualisation offers a real-time preview of your website to explore and control full responsiveness.
In the editor, hover over either edge of the canvas.
A drag icon and bar will appear.
Drag canvas to required breakpoint.
To know where you are at all times, the width presets bar shows the current breakpoint and the canvas width.
With the Drag Visualisation in use, find the Width Presets Bar at the top of the canvas.
The current breakpoint and canvas width are displayed.
Additionally, hover and click to resize your canvas to commonly used screen sizes.
Find the Width Presets Bar at the top of the canvas.
Hover and click the required breakpoint/canvas size.
The snap to breakpoint property allows you to resize your canvas to commonly used screen sizes.
Click the transition point to snap the canvas to the breakpoint’s largest width.
Information about the breakpoint and its transition point is available at the edge of the current breakpoint.
The Breakpoints Manager allows you to customise your breakpoints. It also lists all the currently available breakpoints on your installation and displays its icon, name, transition point and status.
To open, hover over the breakpoints selector in the Responsive Selector.
Click to open the Breakpoints Manager.
When modifying breakpoints, remember to regenerate your block and global class CSS.
The Icon for each breakpoint is displayed to the left of the name.
The breakpoint name is displayed after the Icon.
The Transition Point is the maximum width at which the breakpoint applies.
The Status icon indicates whether a breakpoint is active or not.
Find the Breakpoint you wish to enable or disable.
Toggle the Status icon as required.
The Status indicator does not apply to the default Breakpoints shown below.
The base tag indicates that properties applied to this breakpoint will automatically apply to all screen sizes.
Cwicly automatically sets the correct min-width and max-width media queries for each breakpoint depending on the position of the base tag.
A Breakpoint can be modified from the Breakpoints Manager. You can modify the Icon, the Name, whether the Base is enabled or not, the Width, the Editing Width.
Open the Manager.
the Breakpoint you wish to modify.
Click the Modify icon in the Breakpoints Manager to open the Modify Breakpoint modal.
When you set a new base breakpoint, Cwicly will automatically convert the above breakpoints to min-width media queries.
Open the Manager
Click the Modify icon next to the breakpoint you wish to define as Base.
Toggle Base as required.
You can modify the Icon associated with a breakpoint.
Open the Manager
Click the Modify icon next to the required breakpoint.
Select required Icon.
You can modify the Name associated with a breakpoint.
Open the Manager
Click the Modify icon next to the required breakpoint.
Input new Name.
You can modify the transition point Width associated with a breakpoint.
Open the Manager
Click the Modify icon next to the required breakpoint.
Input new Width.
You can modify the Editing Width associated with a breakpoint.
This allows you to specify the canvas width you wish to snap to while editing the breakpoint.
Open the Manager
Click the Modify icon next to the required breakpoint.
Input new Editing Width.
The Modify Button allows you to apply the changes you have made to a breakpoint.
Open the Manager
Click the Modify icon next to the required breakpoint.
Modify as required.
Click the Modify Button to apply the changes.
The Add new buuton allows you to create a new breakpoint. In the Add Breakpoint modal, you can specify the Icon, Name, transition point Width, the Editing Width.
Click the "+ Add New" button in the Breakpoints manager to open the Add Breakpoint modal.
Specify an Icon, Name, Width and Editing Width as required.
Click the Create Button to apply.
The newly created breakpoint will now be listed in the Breakpoints Manager.
A breakpoint can be removed using the Breakpoints Manager.
Note that the Default Breakpoints cannot be removed.
Open the Breakpoints Manager.
Click the Modify icon next to the breakpoint you wish to remove.
Click the Bin icon to remove.
If you wish to import or export all breakpoints, use the copy/paste icons.
Please note that importing breakpoints will override your existing breakpoints.
If you wish to add your own custom CSS to specific breakpoints, you can use the media breakpoint shortcuts.
These shortcuts are smart and will automatically update the breakpoint width value according to your current settings.
To add a property to a specific breakpoint:
Select a block.
In the Block Inspector, open the Advanced tab.
In the CSS window, start typing "media".
A selection of breakpoints will appear, select as required.
Add required styles.
Whenever your breakpoint width changes, your custom css reflects the changes.
If you wish to, you can hide the Gutenberg Responsive Icon and Width Presets.
The preview/responsive toggle provided by the Gutenberg team can be toggled off to avoid confusion.
Navigate to the Role Editor.
Toggle Gutenberg Responsive Icon as required.
Width presets allow you to rapidly change the width of the canvas to match common device sizes.
Navigate to the Role Editor.
Toggle Width Presets as required.
To switch between breakpoints quickly and efficiently.
Hold CTRL + the breakpoint order integer (1, 2, 3 etc.)
Gutenberg does not trigger iFrame mode when certain conditions are not met. For a more fluid design experience, force iFrame mode for the selected post types (Posts, Pages, Patterns).
Force iFrameThe base breakpoint will be used as the default view inside the Editor but for writing content you might want to choose a specific breakpoint.
For instance if the base breakpoint is mobile, you can set the breakpoint of posts to desktop.
Client Canvas View
