(I think this may be already known, as this is still an ‘experimental’ feature, but I’m not seeing it written anywhere so adding it in)
Issue
when working with mobile-first breakpoints ( setting the mobile width as the base breakpoint ), elements that have default settings that contain CSS are still added at the desktop breakpoint, which makes sense if we’re working desktop first as it inherits down, but causes issues if mobile-first as the styles are only added desktop +, everything is unstyled below that.
Example and how to recreate
After setting the site to have the mobile width as the base breakpoint, add a ‘nestable slider’ element to the page and save.
Notice that the default background colour (#e6e7e8) is incorrectly added only at the largest breakpoint. Meaning the slider has no background colour at all device widths below that.
Expected result
I would expect any defaults to be applied at the mobile base breakpoint instead, when using mobile-first, so the styles are inherited up the different widths
This applies to any default settings that has CSS.
Hey I know this is an old thread, but I’m still seeing weird behavior as well when trying to build mobile-first. Certain settings still get applied at the old default desktop breakpoint instead, despite working in mobile.
Most of the time, it has been rendering okay on the front-end so I’ve ignored it in the builder, but now I’m encountering issues in both areas. Most recently, I am setting the color, width and height of an SVG icon for a button element, but these setting are only being applied for desktop breakpoint.
@timmse - let me know if you want me to start a new thread for this issue, or continue posting here. Screenshots attached.
Hi Eric,
Unfortunately, the task still not solved.
The problem with SVGs is a different one, because the SVG settings are currently not a CSS setting (another old task, which is still on the todo list):
As a workaround, you can use custom CSS to override the styles per breakpoint.
