-1

I'm trying to make simple mediaqueries using the Typical Device Breakpoints, no matter what I change the mediaqueries are always being overwritten when it shouldn't happen. Appreciate a lot help on this, don't know what else to do.

weird mediaquery behaviour

Andres Correa
  • 9
  • 3
  • Are your _themeMixins embedded after the oahu-coral styles? If so, you could try to define in your oahu-coral styles "deeper", for example `body #public-wrapper .home-page-hero.no-image .hero-accent-top-right{}` – J4R Mar 05 '20 at 20:40
  • 1
    media queries do not affect the specificity of a rule. – connexo Mar 05 '20 at 20:41
  • @J4R The CSS selectors are **already way too specific**. – connexo Mar 05 '20 at 20:41
  • @connexo true, forgot about the not affecting specificity of media queries^ – J4R Mar 05 '20 at 20:44

1 Answers1

1

The crux of this issue appears to be related to specifically, the fact that media queries do not affect specificity:

You might think that rules inside media queries would have some sort of precedence over other style rules in the same stylesheet, but they don’t. Media queries themselves have no specificity.

Based on the line numbers in that file, it looks like some of your Media Queries are defined earlier in the file (531, 535) than your actual selector (706), which could explain why your media query is being overridden:

/* Line 531 */
@media (min-width: 1200px) {
    #public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }
}

/* Line 535 */
@media (min-width: 1200px) {
    #public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }
}

/* Line 706 (since this is later, it's overridden the previous ones) */
#public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }

Try moving the media queries within your .less file to ensure that they appear after your original selector to ensure they are not overridden by the non-media query selector.

Rion Williams
  • 69,631
  • 35
  • 180
  • 307