Reduce font size with media querys not working

[mikejcarton]

Hi there.

I am building at this website http://hopestory.flywheelsites.com/

I am trying to reduce font size on different screens. I am using ‘stepping’ in the options to display fonts at different sizes. This does not seem to target my laptop or other laptops.

I have givin the custom text a class and used

@media (max-width: 980px) {
.respon-1 {
font-size: 18px;
}
}

What media query do I need to use to target laptop screen sizes?

[ruenel]

Hello There,

Thanks for writing in!

The code will target screen sizes that is less than 980 pixels which is mostly the tablet and the phone devices.

@media (max-width: 980px) {
  .respon-1 {
    font-size: 18px;
  }
}

To target larger screens, you use this code instead:

@media (min-width: 980px) {
  .respon-1 {
    font-size: 18px;
  }
}

The code will take effect when the screen size is greater than or equal to 980 pixels.

For more details, please check this out: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp