Browser: Chrome 147.0.7727.117
OS: macOS
Bricks: 2.3.3
Summary
When pasting HTML with an inline <style> tag into the Bricks canvas, base CSS rules (rules not wrapped in any @media query) are extracted by Bricks and stored against the Desktop breakpoint rather than the Base breakpoint. This means all base styles only apply at the largest viewport size, completely breaking mobile-first designs.
Steps to Reproduce
-
Enable Mobile First in Bricks (Settings → Builder → Breakpoints → Mobile First)
-
Open any page in the Bricks builder
-
Paste the following HTML onto an empty canvas (Cmd/Ctrl+V):
html
<style>
.my-hero { background: #015f8e; color: #fff; padding: 3rem 1rem; }
@media (min-width: 1023px) {
.my-hero { padding: 5rem 2rem; }
}
</style>
<section class="my-hero"><h1>Hello World</h1></section>
-
After pasting, open the resulting HTML/CSS element and check the CSS field — the base
.my-hero { background: ...; padding: ... }rule will be absent -
Open Style Manager — the base styles will appear there as a global class, but scoped to the Desktop breakpoint
-
Switch the canvas preview to Mobile Portrait (Base breakpoint) — the element is completely unstyled
Expected Behavior
Base CSS rules (those with no @media wrapping) extracted from a pasted <style> The tag should be stored at the Base breakpoint so it applies across all viewport sizes, consistent with standard mobile-first CSS and Bricks’ own mobile-first configuration.
Actual Behavior
Base CSS rules are assigned to the Desktop breakpoint (the largest breakpoint), making them invisible on every smaller viewport. Only the rules already inside @media blocks are preserved correctly in the CSS field.
Workaround
Paste HTML without any <style> tag, then manually enter all CSS directly into the HTML/CSS element’s CSS field. This bypasses Bricks’ style extraction entirely and applies styles correctly across breakpoints.
Feature Request (related)
As an enhancement, it would be great if Bricks could fully parse @media queries found in pasted <style> tags and automatically map their rules to the corresponding Bricks breakpoints. For example, a rule inside @media (min-width: 1023px) would be stored at the Tablet breakpoint, a rule inside @media (min-width: 639px) at Mobile Landscape, and so on — matching whatever custom breakpoints the user has configured. At minimum, the bug fix (correctly assigning base styles to the Base breakpoint) is needed, but full media-query mapping would significantly improve the HTML paste workflow for developers.
. I was able to replicate it and I’ve added it to our internal bug tracker.