Breakpoints

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.

Switch Views

To switch from one breakpoint to another, you can either hover and click or click and drag from the edge of the canvas.

Responsive Selector

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.

Drag Visualisation

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.

Width Presets Bar

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.

Resize Canvas

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.

Snap to Breakpoint

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.

Breakpoint Information

Information about the breakpoint and its transition point is available at the edge of the current breakpoint.

Breakpoints Manager

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.

Open

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.

pageRegeneration

Icon

The Icon for each breakpoint is displayed to the left of the name.

Name

The breakpoint name is displayed after the Icon.

Transition Point

The Transition Point is the maximum width at which the breakpoint applies.

Status

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.

Base Tag

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.

Modify

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.

Base

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.

Icon

You can modify the Icon associated with a breakpoint.

Open the Manager
Click the Modify icon next to the required breakpoint.
Select required Icon.

Name

You can modify the Name associated with a breakpoint.

Open the Manager
Click the Modify icon next to the required breakpoint.
Input new Name.

Width

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.

Editing 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.

Modify Button

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.

Add New Button

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.

Remove

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.

Import/Export

If you wish to import or export all breakpoints, use the copy/paste icons.

Please note that importing breakpoints will override your existing breakpoints.

Custom CSS 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.

Role Editor and Breakpoints

If you wish to, you can hide the Gutenberg Responsive Icon and Width Presets.

Gutenberg Responsive Icon

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

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.

pageGutenberg Editor

Keyboard Shortcuts

To switch between breakpoints quickly and efficiently.

Hold CTRL + the breakpoint order integer (1, 2, 3 etc.)

Force iFrame

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).

pageForce iFrame