Browser: Tested on both Brave [Version 1.78.102 Chromium: 136.0.7103.113 (Official Build)] and Firefox 139.0 (64-bit) OS: Fedora Linux 42 KDE Plasma 6.3.5 Wayland URL: Link to a page that illustrates this issue Video: Jam Video Link Bricks Builder Version: 1.12.4
I am working on a header and I’m using the mobile-first responsive setting. On the mobile breakpoint, I set one section to display:flex and another section to display:none. Then, I reverse these display’s on the largest breakpoint. On the frontend, everything looks great. Though, in my editor, the changes do not take place and I can see the mobile section, even when I have the desktop width selected
Additionally, even when I never set section to hidden, all of the styling changes are not updated in the editor, rather I have to look at the font end to see them.
I tested the same locally, but it was working. Can you try to create new header template, and just add two sections there, and try to set them to display:none and display:flex, the same as in your video.
Not a bug… I’m a dummy. I was editing the screen on my laptop, so even though it said desktop for the one that I was editing, you can see the width in the top bar in the video. Once I made the side tools smaller to grow the editor width to at least the minimum width for desktop, it worked. Makes sense why the changes were not showing as well, since they were all changes meant for the desktop.
On a UI note, I think that it should automatically adjust the width when clicking the desktop, by shrinking the size of the side tools. If not, it should atleast highlight the current device size that you are on if you can variably resize it based on the tools on the left and right side - otherwise there will be users editing the tablet version, thinking it’s desktop because it stays highlighted even when you are able to shrink the width down to tablet by the left and right width.
Thank you for the in depth reply @Matej - it was very helpful in diagnosing the issue, since it replicated. Thanks for the warm welcome as well. I’m loving Bricks so far, I came from Elementor and BeaverBuilder, heard about you guys through the Reddit.
I’m glad that you figured it out And yes, that’s the reason - even though you have “desktop” selected, the width is actually lower, so it will be applied to the smaller breakpoint.
But, the good news is that in 2.0 we fixed that, and the styles will be applied to the exact breakpoint that you selected. So, in your case, even if you have larger left and right panels, it would still be a desktop breakpoint You can try on the 2.0-beta
I’m glad it helped! And I hope you will enjoy using Bricks builder and if there are any questions you have, or bugs to report, we are always checking the forum and tickets
And yes, that’s the reason - even though you have “desktop” selected, the width is actually lower, so it will be applied to the smaller breakpoint.