CODEWITHSUNDEEP
htmlcssmedia-queries
Volkan
Volkan

Reputation: 546

media query resize span font-size

I am working in a wordpress. I have specific span tag with a size

<span id="some_id" style="font-size: 26px;">Some title</span>

When the screen, viewport gets small, I want it to reduce the font size, like:

@media screen and (max-width: 640px) {
  #some_id{font-size:15px;}
}

but it doesnt work! all other rules inside of this media screen work, except this one

why? thanks!

Upvotes: 2

Views: 1654

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Inline styling overrides your css. The order of appearing the css determines wich is most important. If you need to avoid this problem, you need to think in two solutions (select what is better for you)

Solution 1

  <span id="some_id" class="font26">Some title</span>

   .font26 { font-size: 26px; }

Solution 2

 @media screen and (max-width: 640px) {
    #some_id{font-size:15px !important;}
  }

The !important operator is dangerous if you don't know how it works. First of all, learning how css is rendering and his priorities.

Good luck

Upvotes: 1

Related Questions