Change font-size with media queries-CodePudding

I want to change the font size of a table header. It should be large when the application is view at the desktop and become smaller when shown on a mobile phone.

th {
  @media screen and (max-width: 699px) {
    font-size: xx-large;

  }  
  @media screen and (max-width: 700px) {
    font-size: small;

  }  
  
}

I am not quite sure if this is the right way.

CodePudding user response：

you have to write the TH style inside the media syntax For more details

@media only screen and (max-width : 700px) {
th
{    font-size: small;

  }
}

CodePudding user response：

You have to write this way

th {
    font-size: xx-large;
}

@media screen and (max-width: 699px) {
   // write any CSS code here.

  th {
    font-size: xx-large;
   }
}

CodePudding user response：

The way to do this is to style the th element as you would have it on the large screen and then set the media query to apply a different style for smaller screens.

th{
  font-size: large-font-size;
}

Then now write the different styles to be applied on smaller screens.

@media screen and (max-width: 700px) {
    font-size: smaller-font-size;
  }