Tagged: Button Size
Hi there, my client wants the ‘enter’ button on a landing page to be made bigger, say twice the size it is now, but I only want this change on this button only. Can you let me know if there is a way to do this please?
Thanks
Simon
Hey goatie77,
Please try the following in Quick CSS under Enfold–>General Styling:
.page-id-1290 input[type="submit"] {
padding: 18px 44px !important;
}
Best regards,
Rikard
That doesn’t seem to have made the button any bigger. I changed the values to see what would happen, but I didn’t see any difference. If the text size was increased, would that change the button size with it?
Hi,
Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
Rikard
Details attached
Hi,
Thanks for the details though it seems you have removed the page you needed the CSS for? We need to inspect the element in question in order to give you page specific CSS.
Best regards,
Rikard
The page required has been set as the front page, it’s the button on this page that needs to be made larger.
Thanks
Simon
Hi,
adjust buttons padding with this code inside Quick CSS field:
#top .avia-slideshow-button.avia-color-light {
padding: 20px 150px;
}
and adjust the values as needed.
Best regards,
Andy
Brilliant, that’s worked great. How would I increase the text size if required?
Simon
Hi,
Please try replacing Andy’s code with this:
#top .avia-slideshow-button.avia-color-light {
padding: 20px 150px;
font-size: 20px !important;
}
Best regards,
Rikard
Perfect, that’s done the job. Thanks very much for your help guys :)
Hi,
glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.
Best regards,
Andy