Manually adjust accordian text size for different screen sizes

[Bart_Lenski]

Hello,

I am using this CSS code control accordian text size for mobile screens:
@media screen and (max-width:769px) {
.yourCustomClass {
font-size: 12px !important;
}
}
and I am using this to control the desktop size:

@media screen and (min-width:1200px) {
.accord {
font-size: 20px !important;
}
}

But I am lost how to control the values in between - could you please let me know what code should l use to adjust it for all break points - I am using standard break points.

Best regards,
Bart

[ruenel]

Hello Bart,

Thanks for writing in!

Please check out this @media CSS documentation:

• https://css-tricks.com/a-complete-guide-to-css-media-queries/

As an example, you can use something like this:

@media (max-width: 768px) {
  .element {
     /* Some styling for screen sizes with less than 768 pixels */
  }
}

@media (min-width: 1200px) {
  .element {
     /* Some styling  for screen sizes larger than 768 pixels*/
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .element {
     /* Some styling  for screen sizes larger than 768 pixels and smaller than 1200 pixels */
  }
}

Hope this helps.