[acbrent25Participant]

Hi,

I have been having trouble with media queries for the buttons on the Stay Connected section of my site here:
http://macleanagency.virtuentmedia.com/

I will attach screen grabs, but the main problem is on the ipad the buttons get squished. I have them set to 100% width, so I’m trying to reduce the font size on the ipad screen so that the button text doesn’t wrap and look all weird.

Also on smaller screens I would like the width to be smaller say 60%.

I tried about 20 different times to target them with media queries with no luck. It works for other elements on the page I just can’t make it work for the buttons.

Please help.

[RupokMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 768px) and (max-width: 979px) {
.stayconnected-btn {
  font-size: 10px;
  padding: 0.429em 0 0.643em;
}
}

@media only screen and (max-width: 767px) {
.stayconnected-btn {
  margin: 10px auto;
  width: 60%;
}
}

Hope this helps.

Cheers!

[acbrent25Participant]

Hi,

I didn’t change anything.

[acbrent25Participant]

Nevermind! I just figured out the problem. I had messed up some css in the beginning and was causing the error. Too much late night working.

Thank you for your help!

[ZeshanMember]

Glad to hear you’ve figured it out! 🙂 Have a good day.

[Author]

Posts