Hlo im new to stackoverflow . In my website , when i was trying to make it responsive with @media rule , its size is not changing. But other properties like color is working for me with media rule . Can anyone help me with this ?

CSS CODE

@media (orientation: portrait) { 
  h2{
    font-size : 10px;
  }
 }

HTML CODE

  <h2 style="padding-top: 300px;font-size:70px;" class="text-center"><u>MERRY CHRISTMAS</u></h2> 

CodePudding user response：

Its due to the inline css inline css will take highest priority. If you define inline css rule inside <style> tag or a different css file it will work.

h2{
  font-size:70px
}
@media (orientation: portrait) {
  h2{
    font-size : 10px;
  }
 }

<h2>Merry Christmas</h2>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or else if you want to keep inline css, just add !important, as added below.

@media (orientation: portrait) {
  h2{
    font-size : 10px!important;
  }
 }

which is generally not a good practice