What looks great on a large desktop screen usually needs some refinement for smaller devices. This typically involves applying smaller font sizes, margins, paddings, column width/stacking, or hiding certain elements on smaller devices.
Bricks provides the following four breakpoints of-of-the-box:
|Tablet portrait||< 992px|
|Mobile landscape||< 768px|
|Mobile portrait||< 478px|
Styles set on the base breakpoint are inherited by all other breakpoints.
Once you’ve finished styling a page on the base breakpoint (desktop), make sure to view & adjust the styling on the other breakpoints too.
To view & edit the styles for a specific breakpoint simply click on its breakpoint icon located in the center of the builder toolbar. Or via the keyboard shortcut “CMD/CTRL + B”.
The screenshot above shows the builder editing the Mobile portrait breakpoint.
Next to the breakpoint icons are inputs for width (“W”), height (“H”), and scale (%).
Bricks 1.5.1 introduces custom breakpoints as a
experimental! feature. Please only enable & use it for testing & bug-reporting purposes at this time!
To use custom breakpoints you first have to enable them in your WordPress dashboard under “Bricks > Settings > General > Custom breakpoints”:
Once enabled, you can access the breakpoint manager in the builder by clicking the three-dotted icon in the builder toolbar (next to the first breakpoint icon):
Editing a breakpoint
Clicking the pencil icon brings up the editing options of the seleted breakpoint:
You can edit the following breakpoint properties:
|Label||Used when hovering over the breakpoint icon in the builder toolbar|
|Width (px)||@media query min-width/max-width value (depending on the base breakpoint)|
|Width (Builder)||Width is used when switching to the breakpoint in the builder|
|Icon||Used as the breakpoint icon in the builder toolbar|
|Base breakpoint||Set breakpoint as base breakpoint|
|Key||Not customizable (used to store & identify breakpoint settings)|
The most common action is to customize the widths of the default (mobile) breakpoints. The following screenshot shows you the “Tablet portrait” with a custom width of 1023px:
That means any styles set on the “Tablet portrait” breakpoint will apply to devices with a width of less than 1024px.
Creating new breakpoints
You can create as many additional custom breakpoints as you want. Although, it is recommended to first customize the widths of the default mobile breakpoints to your liking before utilizing more breakpoints.
You should rarely need more than one or two additional breakpoints on top of the default ones.
Clicking the “+” (plus) icon in the breakpoint manager’s header launches the breakpoint creation form.
The following screenshot shows how we created a new breakpoint named “Large” with a width of 1400px:
Once you click “Create” your newly created breakpoint should appear in the breakpoint manager (alongside a “CUSTOM” label) & in the builder toolbar like this:
As we’ve set the width of this new breakpoint to 1400px, it shows as the first breakpoint, as it is now the largest of our breakpoints. The Desktop (base breakpoint) has a default width of 1279px.
Pausing a custom breakpoint
You can pause any of your custom breakpoints by toggling the checkbox at the right-hand side of the breakpoint manager:
Pausing a custom breakpoint allows you to skip generating the styles for it on the frontend, while still retaining the styles you’ve set for it throughout your site without having to delete them one-by-one. Which, on a full-built-out site can go into thousands of settings.
Resetting a default breakpoint
To restore the default values of a default breakpoint, you just have to click on the “reset” icon (next to the pencil) icon.
Resetting all breakpoints
Clicking the “gear” icon in the breakpoint manager header opens up the “Reset: Breakpoints” action. Clicking this button removes all your breakpoint edits (default & custom breakpoints) from the database. But NOT the breakpoint-specific settings performed on an element.
Understanding the base breakpoint
The base breakpoint doesn’t have a @media query. So all styles set on the base breakpoint apply to all screen widths.
That is why, by default, any styles set on the “Desktop” breakpoint are visible on any other breakpoint. Unless you specify a style on a certain breakpoint. Then the breakpoint-specific rule precedes the base breakpoint style.
When editing a breakpoint you can set it as the “Base breakpoint”. Then all styles set on this new base breakpoint are inherited up & down the breakpoint chain.
In the following screenshot, you can see that the “Tablet portrait” breakpoint has been set as the base breakpoint.
The yellow dot, lines, and arrows next to the breakpoint icons should help to visualize the style inheritance:
Styling in Bricks, by default, happens from the largest breakpoint down to “Tablet portrait” > “Mobile landscape” and “Mobile portrait”.
Starting at 1.5.1 you can now utilise a so-called
mobile-first design approach by setting the smallest breakpoint as the base breakpoint.
The following screenshot shows the “Mobile portrait” (our smallest breakpoint) set as the base breakpoint. We now use the mobile-first approach. Also indicated by the “MOBILE FIRST” label in the breakpoint manager header:
You’ll also notice that the order of the breakpoints is reversed and now starts at the smallest breakpoint. You can now start to design your pages starting at the smallest breakpoint.
The new “mobile-first” approach is highly experimental, not ready-for-production sites, and quirks are to be expected! You should also decide about the desktop-first or mobile-first before you start designing your site.
Regenerating (Bricks) CSS files
Whenever you customize the width of a default breakpoint Bricks automatically updates any Bricks CSS files (like frontend.min.css, etc.) that contain media queries for this breakpoint.
If you experience that your breakpoint widths on the frontend are not properly applied, please make sure to regenerate the Bricks CSS files by clicking the “Regenerate CSS files” button under Bricks > Settings > General > Custom breakpoints.