htmlcssless

Why this less specification fails to apply the background to the div?

My goal is to set the background of the div of class notice-bar to red when the page is loaded in an iphone or similar mobile device.

This is my less file:

@mandy: #ff0000;

// extra small
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);

.hidden {
    display: none;
}

// This does not work too
// .active .content .notice-bar {
//    background: @mandy;
// }

.active .content {
  @media (max-width: @screen-xs-max) {
    background: @mandy;
    .header {
      display: none;
    }
    .notice-bar {
      display: block;
    }
    .view-switcher a {
      color: white;
    }
  }

}

And here is my html file

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="content active">
        <div class="header notice-bar">
            Expect to be red background
        </div>
         <div class="header header-text">
            Expect to be hidden
        </div>
        <div class="hidden">
            Hidden
        </div>
    </div>
</body>
</html>

I would expect the div of class header notice-bar to have a red background color when being viewed in an iPhone or other similar smartphones but it does not. Actually even if I set it explicitly, it does work not either. 

.active .content .notice-bar {
    background: @mandy;
}

What did I miss?

EDIT

I followed @Vucko's suggestion and I can see a red background in chrome. However I am still unable to see the same effect in mobile safari. Here is the new less code

   .active.content {
      @media (max-width: @screen-xs-max) {

Here are the screen shots

Works in chrome

Does not work in mobile safari

My primary is to make the less code works with media specification.

Solution

  • Your LESS/CSS works, you just have the wrong selector.

    .active .content .notice-bar{}

    Means you're targeting the .content that's the child of .active.

    To target <div class="content active">, you have to join those two classes, like

    .active.content{} /* notice there is no space bewteen active and content*/


    .content .active .notice-bar{
  background: red;
}

.content.active .notice-bar{
  background: blue;
}
    <div class="content">
  <div class="active">
    <div class="notice-bar">
      .active is the child of .content
    </div>
  </div>
</div>

<div class="content active">
  <div class="notice-bar">
      parent has two classes
  </div>
</div>

    Also, to make it work on mobile, then you have to add the meta tag for mobile viewport.

    <meta name="viewport" content="width=device-width, initial-scale=1">

    More about that in HTML5 boilerplate documentation.