Hi, my website looks good on mobile from inside the Bricks editor, but is completely messed up when I open it in a browser. Any reason for that?
I think it’s because in Bricks Builder, the builder preview shows a fixed max width, which can be misleading.
For example, the default desktop width inside the builder is 1280px. However, the actual responsive range should be handled properly from 1280px down to 992px. But since the builder always shows 1280px, you might miss issues that occur between 1280px and 992px—which can cause the layout to break on real devices.
Solution:
When working with Bricks, follow these steps:
- Go to Bricks > Settings and enable custom breakpoints.
- Open the builder.
- Click the three dots next to the breakpoint icons.
- Set the builder width to the next breakpoint +1px.
Example:
If your tablet breakpoint is 991px:
- Set the builder width for desktop to 992px.
- Set the builder width for tablet to 783px, and so on.
This way, you’re designing at the edge of each breakpoint and can catch issues in the in-between ranges.
You might find a YouTube tutorial about this—just try searching on YouTube.