# 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.
{% hint style="danger" %}
When modifying breakpoints, remember to regenerate your block and global class CSS.
{% endhint %}
{% content-ref url="../settings/regeneration" %}
[regeneration](https://docs.cwicly.com/settings/regeneration)
{% endcontent-ref %}
### 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.
{% hint style="info" %}
The Status indicator does not apply to the default Breakpoints shown below.
{% endhint %}
### 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.
{% hint style="info" %}
Note that the Default Breakpoints cannot be removed.
{% endhint %}
* 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.
{% hint style="info" %}
Please note that importing breakpoints will override your existing breakpoints.
{% endhint %}
## 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.
{% content-ref url="../themer/role-editor/gutenberg-editor" %}
[gutenberg-editor](https://docs.cwicly.com/themer/role-editor/gutenberg-editor)
{% endcontent-ref %}
## 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).
{% content-ref url="../themer/role-editor/force-iframe" %}
[force-iframe](https://docs.cwicly.com/themer/role-editor/force-iframe)
{% endcontent-ref %}
## Client Canvas View
The 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.
{% content-ref url="../themer/role-editor/client-canvas-view" %}
[client-canvas-view](https://docs.cwicly.com/themer/role-editor/client-canvas-view)
{% endcontent-ref %}
