Hi there, I want use to included short code for the Avia Full-width Button to create a secondary services selection. Hence, I would like to reduce the font size (1.5em) for the button. I inspected the code for the button with Firebug and it pointed me to the shortcode.css. But when I reduce the font size by incorporating the following into my custom style sheet, it throws the hover effect and it’s displayed below.
#top .avia-button-fullwidth {
border: medium none;
display: block;
font-size: 1.5em;
margin: 0;
padding: 20px;
position: relative;
width: 100%;
}
Any pointers on how I could reduce the font size and maintain the hover effect would be greatly appreciated.
In addition, is there a way to change the font color on hover as well?
Many thanks for your help and patience & Happy New Year!!!
Hi MadRhino!
Try adding this in Dashboard > Enfold > General Styling > Quick CSS.
.avia-button-fullwidth { font-size: 12px !important; }
If that’s not working then send us a link and we’ll take a look.
Cheers!
Elliott
Thanks Eliot. That worked.
I just noticed that the font color is different from the font color I’m using in my headers. How can I modify that?
Moreover, sine I’m using a purple background on hover, it would be very nice, if I could change the font color on hover as well. Is that possible?
I’m sorry having to bother you guys with these profane questions, but if I inspect the button using Firebug, it points me to the shortcode css,ver2. Why is that?
Again, many thanks for your time and help. I really appreciate ti.
Hi!
please send us a link to your website, so we can provide you some CSS code.
Cheers!
Andy