-
Posts
-
Is there a way for me to change the size of all buttons on my website at once (vs going in to all 120 pages/posts and changing them manually)?
J
Hey gatehealing,
Could you post a link to where we can see an example button, and let us know what you would like to achive please?
Best regards,
RikardI’m getting audit messages that tap targets are too small, especially on mobile devices. They look fine to me on desktop, but my SEO company is saying that I should make them a bit larger. There’s a link below that shows the type of buttons I have around most of the site (I think they are button elements, either medium or large size).
Hi,
Thanks for that. You can try to change the padding for all buttons using this CSS:
.avia-button { padding: 30px 30px 30px 30px !important; }Best regards,
RikardThanks @Rikard,
I’m assuming that goes in the quick css box (vs in one of the .php or stylesheet etc files)?
J
Oh, I just found that since changing the button size is just a matter of increasing padding, I can do that in Advanced Styling > Buttons > Padding Top/Bottom and Padding Left/Right.
I can tweak font size there too so the button doesn’t look too large for the font.
Well, I found a little hiccup: Whether I use quick css or Advanced Styling > Button … The changes show up on desktop version of site, but not on mobile.
I do not see an option for applying the changes to mobile as well in Advanced Styling . . . is there a way to apply the changes to mobile where it doesn’t look enormous compared to the font etc around the mobile buttons?
J
Hi,
Please try the following in Quick CSS under Enfold->General Styling in order to only target mobile devices:
@media only screen and (max-width: 767px) { .avia-button { padding: 30px 30px 30px 30px !important; } }Best regards,
RikardThat works. I’ll use the Advanced Styling for the desktop sites and will use the quick css for the mobile devices.
What would I add to the quick css for mobile devices to be able to change font size?
J
Hi,
Please try using this CSS instead to change the font size on mobile devices as well:
@media only screen and (max-width: 767px) { .avia-button { padding: 30px 30px 30px 30px !important; font-size: 20px; } }Best regards,
RikardThanks,
Unfortunately, that code does not seem to change the font size on any of my browsers in either landscape or portrait mode, even after clearing all browser history/caches etc., and clearing all caches in wordpress interface. I have also closed the browsers, restarted my phone, and made sure that everything is up to date.When I was just changing the padding, the changes took place immediately, even if I didn’t clear any caches/history.
This doesn’t really make sense to me since your code looks just like other code y’all have provided.
JHi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { #top #wrap_all .avia-button { padding: 30px 30px 30px 30px !important; font-size: 20px; } }I’m looking at this button on your homepage as an example:
these are the correct buttons, right?
If you have a missing bracket in your css somewhere it could cause issues for new css, so try adding the css to WordPress ▸ Customize ▸ Additional CSS and see if that makes a difference.Best regards,
Mikeour posts may have crossed each other. Putting !important; fixed it.
The button you showed is the correct type of button that I am adjusting site-wide.Should I not use !important;? I can use the other code you provided instead.
JHi,
The code I posted also has !important; so if I misunderstood and the css is woring for you now then go ahead and use it.
Unless there is anything else we can assist with on this issue, shall we close this thread then?Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Change all button sizes/font sizes site-wide’ is closed to new replies.