Change font-size with media queries

Question

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.

Look up the syntax for media queries. MDN is a good source. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media — A Haworth, Aug 11 '22 at 08:18

score 1 · Answer 1 · answered Aug 11 '22 at 08:23

1

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;

  }
}

answered Aug 11 '22 at 08:23

Jaswinder Kaur

1,606
4
15

score 0 · Accepted Answer · answered Aug 11 '22 at 08:19

0

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;
   }
}

answered Aug 11 '22 at 08:19

Mubasher Ali

502
6
14

score -2 · Answer 3 · answered Aug 11 '22 at 08:15

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;
  }

Change font-size with media queries

3 Answers3