CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user811602
user811602

Reputation: 1354

@media query not working (not changing color of <h1>)

I am trying to change color of tag on screen resizing. My html page has following lines 

<meta name="viweport" content="width=device-width, inital-scale=1.0">
.
.
    <div class="container">
        <div id="bg">
            <img src="/affeo/img/lll1.jpg" class="img-responsive"/>
            </div>
    </div>
    <div class="container">
        <div class="jumbotron text-left" id="jumboText">
                <h1>Hello World 0</h1>
            </div>
    </div>

CSS file has following style:

@media all and (max-width: 1000px) {
    #bg {
          display:none;
    }

    #jumboText h1 {
      color: black;
    }
}
.
.
#jumboText {
  position: absolute;
  top: 20%; 
  left: 15%; 
  background-color:transparent;
}

#jumboText h1 {
  position: absolute;
  padding-left: 10px;
  color: #FFFFFF;
  opacity: 0;
  white-space: nowrap;
}

Now when I am resizing the screen, image in id:bg is disappearing as expected, but color of jumboText is not changing to black.

Upvotes: 0

Views: 1487

Answers (2)

Danield
Danield

Reputation: 125413

Move your media query to the bottom of your code.

The way you have it now - the code inside your media query will be overridden by your regular code

Alternatively, you could increase the specificity of the classes within the media query by say adding the body tag in the selectors

@media all and (max-width: 1000px) {
    body #bg {
          display:none;
    }

    body #jumboText h1 {
      color: black;
    }
}

Upvotes: 3

Tony Barnes
Tony Barnes

Reputation: 2643

You need to declare the media queries styles after the non-media query styles - towards the bottom. Otherwise the media queries are overwritten.

There is also a opacity:0; declared on the h1 which needs to change in the media query.

http://jsfiddle.net/omupxnhm/6/

Upvotes: 2

Related Questions