If you’ve ever wanted more control over responsive design in Bricks Builder, this tutorial is for you. Learn how to enable, create, and manage custom breakpoints so you can fine-tune your layouts for laptops, large desktops, and any screen size in between. Perfect for beginners and anyone switching from Elementor.
Timestamps:
- 0:00 Introduction
- 2:11 Enable Custom Breakpoints
Bricks Custom Breakpoints vs. Elementor: Everything You Need to Know
Responsive design is an essential part of modern web development, and breakpoints are what make it possible. They allow you to customize your layouts for different screen sizes, ensuring your website looks great whether someone is browsing on a desktop, laptop, tablet, or smartphone.
If you’re transitioning from Elementor to Bricks Builder, you’ll quickly notice that both builders support custom breakpoints. However, Bricks offers a more flexible approach that gives you greater control over your responsive designs.
In this guide, we’ll compare how Elementor and Bricks handle breakpoints, show you how to enable custom breakpoints in Bricks, and explain why many developers prefer Bricks’ implementation.
How Elementor Handles Custom Breakpoints
Elementor includes support for custom breakpoints, but the feature must be enabled in the builder’s settings on some installations. Once activated, you can configure your responsive breakpoints through the Site Settings panel.
By default, Elementor includes breakpoints for:
- Desktop
- Laptop
- Tablet Landscape
- Tablet Portrait
- Mobile Landscape
- Mobile Portrait
While these built-in options cover most common devices, Elementor limits you to six breakpoints. For many websites this is enough, but more specialized projects may require additional responsive layouts that fall between the standard device sizes.
If you regularly build custom interfaces or applications, this limitation can become restrictive.
Bricks Supports Unlimited Custom Breakpoints
Bricks takes a different approach.
Rather than limiting the number of breakpoints you can create, Bricks allows you to add as many custom breakpoints as your project requires.
Before you can begin using them, you’ll need to enable the feature.
Navigate to:
Bricks → Settings → General
Scroll to the Custom Breakpoints option, enable it, and save your changes.
Once enabled, you’ll see additional controls inside the Bricks builder that allow you to create and manage custom responsive breakpoints.
Creating a Custom Breakpoint in Bricks
Adding a breakpoint is a simple process.
Inside the editor, open the breakpoint manager and create a new breakpoint by providing:
- A descriptive label
- A screen width
- An icon for easy identification
For many projects, adding a laptop breakpoint around 1200 pixels creates a smoother transition between desktop and tablet layouts.
This extra breakpoint helps eliminate awkward layout changes that often occur between large desktop screens and tablet devices.
The process only takes a few seconds, and once created, the breakpoint becomes available throughout your project.
When Should You Add Extra Breakpoints?
Just because Bricks allows unlimited breakpoints doesn’t mean you should create dozens of them.
In most cases, keeping your responsive system simple leads to easier maintenance.
A practical breakpoint setup might include:
- Desktop
- Laptop
- Tablet
- Mobile
Only add additional breakpoints when you have a specific design challenge that cannot be solved with your existing responsive layout.
Too many breakpoints can make it difficult to remember where individual style changes were made, especially on larger websites.
Understanding the Base Breakpoint
One of Bricks’ most useful responsive features is the ability to choose your base breakpoint.
By default, Bricks uses the desktop layout as the starting point. You design your desktop experience first, then make adjustments as screen sizes become smaller.
Many developers prefer this desktop-first workflow because it matches how most traditional websites are designed.
However, Bricks also supports a mobile-first workflow.
If you prefer to design for smaller screens first, simply change your mobile breakpoint to become the base breakpoint. Your responsive styles will then cascade upward toward larger devices instead of downward.
This flexibility allows you to adopt whichever workflow best fits your development process.
Resetting Your Breakpoints
If you ever need to start over, Bricks makes that easy as well.
Within the breakpoint settings, you can reset your breakpoint configuration back to the default layout.
This is especially helpful if you’ve been experimenting with multiple breakpoint setups and want to simplify your responsive structure.
Regenerating CSS Files
Occasionally, you may update breakpoint settings and notice that changes aren’t immediately appearing on the front end of your website.
In those situations, Bricks includes a Regenerate CSS Files option.
Running this tool rebuilds your CSS and can resolve caching issues that prevent recent style changes from displaying correctly.
While this feature is available when needed, most users rarely have to use it during normal development.
Bricks Handles CSS Differently Than Elementor
One important difference between Elementor and Bricks is how each builder outputs CSS.
Elementor typically generates external CSS files for your pages. While this approach works well in many situations, it can sometimes introduce caching issues, especially on hosting environments with aggressive server-side caching.
Bricks uses inline styles by default.
Instead of creating separate CSS files for every page, the required styles are embedded directly into the page’s HTML. This approach greatly reduces caching problems because the styles travel with the page itself.
For many developers, this leads to a more predictable editing experience, particularly while actively building and testing websites.
Should You Use Inline Styles?
For most Bricks users, the default inline CSS setting is the recommended choice.
Using inline styles offers several advantages:
- Fewer caching issues during development
- Faster visibility of style changes
- Less dependence on cache clearing
- More reliable responsive testing
Unless you have a specific performance strategy that requires external CSS files, sticking with the default inline method is typically the simplest and most reliable option.
Conclusion
Custom breakpoints are one of the areas where Bricks provides noticeably more flexibility than Elementor.
While Elementor offers a fixed set of responsive breakpoints, Bricks allows you to create an unlimited number of custom breakpoints that fit your specific projects. Combined with support for both desktop-first and mobile-first workflows, Bricks gives developers far more control over responsive design.
That said, unlimited flexibility doesn’t mean unlimited complexity. For most websites, a small number of thoughtfully chosen breakpoints will provide the best balance between responsive control and long-term maintainability.
If you’re moving from Elementor to Bricks, learning how custom breakpoints work is a small investment that can make your responsive workflow much smoother on future projects.
