Overriding styles [#2893313]

Hi,

Am trying to get started with Radix, I needed to explore different styles for different breakpoints.
I edited components/_menu.main.scss (on both standard sub theme and bootswatch) and added this:
.navbar-right {
background: red; // Body will have background: red for all xs devices.

@include breakpoint(sm) {
background: blue; // As from sm devices, the background will be blue.
}

@include breakpoint(md) {
background: yelllow; // Yellow background for md devices.
}

@include breakpoint(lg) {
background: green; // Green background for lg devices.
}
}

compiled, checked on the result css, this new config is on, BUT, nothing has changed on all sizes, and theses styles do not appear when I inspect the "navbar-right" class on the browsers, what's wrong ?

Zied.

Comments

Comment #1

9 July 2017 at 11:15

zydoon created an issue. See original summary.

Comment #2

shadcn CreditAttribution: shadcn at Chapter Three commented 11 July 2017 at 21:00

@zydoon let's check a few things:

Is the style added to /path/to/your/subtheme/assets/css/subtheme.style.css?
Did you turn off caching?
Clear the cache and test again

Comment #3

zydoon CreditAttribution: zydoon commented 12 July 2017 at 18:54

Hello @arshadcn,

thank you for your reply

Is the style added to /path/to/your/subtheme/assets/css/subtheme.style.css?
Yes, it's, in the very bottom of the file:

.navbar-left {
  color: #ied175;
  font-family: serif; }

@media (min-width: 768px) {
  .navbar-left {
    color: blue;
    font-family: monospace; } }

@media (min-width: 992px) {
  .navbar-left {
    color: yelllow;
    font-family: cursive; } }

@media (min-width: 1200px) {
  .navbar-left {
    color: green;
    font-family: fantasy; } }

Did you turn off caching?
Yes
Clear the cache and test again
Many times :)

Comment #4

zydoon CreditAttribution: zydoon commented 12 July 2017 at 19:20

I started over with a Radix subtheme and bootswatch kit
put this on the same file

/path/to/subtheme/assets/scss/components/_menu.main.scss
.navbar-right {
  background: red; // Body will have background: red for all xs devices.

  @include breakpoint(sm) {
    background: blue; // As from sm devices, the background will be blue.
  }

  @include breakpoint(md) {
    background: yelllow; // Yellow background for md devices.
  }

  @include breakpoint(lg) {
    background: green; // Green background for lg devices.
  }
}

And now I get the expected behaviour.