I’ve got some code I’m writing for a website builder that’s causing me issues. We’re using CSS variables to define global styles, with both desktop and mobile layout options, e.g.:
:root {
--section-padding-top: 2rem;
--section-padding-right: 8rem;
--section-padding-bottom: 2rem;
--section-padding-left: 8rem;
}
@media only screen and (max-width: 767px) {
#main {
--section-padding-top: 3rem:
--section-padding-right: 0rem:
--section-padding-bottom: 3rem:
--section-padding-left: 0rem:
}
}
We’re using the #main selector in the mobile overrides to ensure these stick. The reason is we allow users to override styles for specific sections, with our code generating the following type of CSS block in page:
<style>
.box-794ccd158158463bae325e0eb4c1c939 {
--section-padding-top: 0rem;
--section-padding-right: 8rem;
--section-padding-bottom: 0rem;
--section-padding-left: 8rem;
}
@media only screen and (max-width: 767px) {
#main .box-794ccd158158463bae325e0eb4c1c939 {
/* No mobile overrides in this example */
}
}
</style>
The HTML looks roughly like this:
<body id="main">
<section data-id="d1b57912-1e94-4014-929e-02a38d893710" class="section component-1ca0a679fc4a4ba7a1e6b1fd9bec611e section-d1b579121e944014929e02a38d893710">
<div class="box box-794ccd158158463bae325e0eb4c1c939 section-box">
<div class="box-content">
<!-- Content -->
</div>
</div>
</section>
</body>
The idea here is that the desktop overrides, being scoped to a class, would not override the global mobile variables, which are scoped to an ID.
What’s actually happening is the browser (Chrome) is respecting the desktop override, which appears later (on page) than the global settings, and ignoring the ID-scoped mobile variables. See here:
Any ideas on why this may be? I’m very confused