0

I got a WordPress page with three CTA buttons on it that need to be applied following CSS to when on resolutions of less than 576px and between 750px to 900px. Please help me understand how to write a conditional media query to apply the following CSS.

padding-left: 1rem;
padding-right: 1rem;
font-size: 1.1rem;
CodeForGood
  • 767
  • 7
  • 30

1 Answers1

0

Use this queries and paste your code inside of both.

@media only screen and (max-width: 576px)  {...}
@media only screen and (min-width: 750px) and (max-width: 900px)  {...}
Aashir Azeem
  • 173
  • 6
  • Thanks, but can these two be put into some conditional statement? – CodeForGood Nov 13 '21 at 07:18
  • Well if you want to do this in conditional statement than you have to use JQuery window.width functions. See the link below https://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px – Aashir Azeem Nov 13 '21 at 07:27
  • 1
    Thank you Aashir. I tried your solution. It works,but not for certain resolution. I actually need to keep all three buttons linear on this page. Could you please try your CSS solution on this page https://packedwithpurpose.gifts/gift-concierge/? – CodeForGood Nov 13 '21 at 08:01
  • Please have a look when you are free. – CodeForGood Nov 13 '21 at 18:23