-2

I have this html code:

<div class="guide">
  <h2><b style="font-size: 3vw">filler</b></h2>
  <h1><b style="font-size: 3.2vw"> Who's cuter? Click to Choose.</b></h1>
</div>

and this is my css media query:

@media screen and (min-width: 700px) {
  .guide {
    font-size: 25px;
    color: blue;
  }
}

The color changes to blue but the font size doesn't. Any help is appreciated.

Merrin K
  • 1,602
  • 1
  • 16
  • 27
Mark
  • 1
  • 2

6 Answers6

0

You have inline styles on children of the .guide div. Try adding rules to those elements in your media query:

@media screen and (min-width: 700px) {
  .guide,
  .guide h1 b,
  .guide h2 b {
    font-size: 25px !important;
    color: blue;
  }
}
D M
  • 5,769
  • 4
  • 12
  • 27
0

Your CSS in media-query is overwritten by your inline-CSS applied in your html.

You can use !important in your external CSS.

@media screen and (min-width: 700px) {
  .guide {
    font-size: 25px !important;
    color: blue;
  }
}

However, the !important rule is most times considered a bad practice. A better solution could be to use no inline-CSS at all and include it all in your external CSS.

Check here: Does embedded css always override external css?

treecon
  • 2,415
  • 2
  • 14
  • 28
0

It's not working because you have added inline css in HTML code, which has the highest priority.

Remove inline CSS from your html code. and it will work.

<h1><b> Who's cuter? Click to Choose.</b></h1>
Chandra Kant
  • 207
  • 1
  • 5
0

Please try with this code.

.title {
  font-size: 3vw;
}
.text {
  font-size: 3.2vw;
}
@media screen and (min-width: 700px) {
  .title, 
  .text {
    font-size: 25px;
    color: blue;
  }
}
<div>
  <h2>
    <b class="title">filler</b>
  </h2>
  <h1>
    <b class="text">Who's cuter? Click to Choose.</b>
  </h1>
</div>

It will work. Best regards.

0

Remove inline styles and use class selectors for the same and that way your css rules will take effect.

Shridhar Mani Tripathi
  • 1
  • 2
0

your code not work beacuse you use inline-Css

try this code :
html : 

 <div>
  <h2>
    <b class="title">filler</b>
  </h2>
  <h1>
    <b class="text">Who's cuter? Click to Choose.</b>
  </h1>
</div>

and Css : 

 .title {
        font-size: 3vw;
      }
      .text {
        font-size: 3.2vw;
      }
      @media screen and (min-width: 700px) {
        .title, 
        .text {
          font-size: 25px;
          color: blue;
        }
      }
ralia
  • 9
  • 1