Thank you for your reply but this isn’t really a fix. The button still blows up at certain page widths and then is not displayed properly when in mobile. Why is it that it scales properly without a url, but when a url is added it is different?
That is because the css classes are not the same with and without a link. Without a link, only the button class is present. When you set up an url, the <a> tag is added and along with it the link css attributes.
This screenshot show it: https://postimg.org/image/n2to50ct7/
I added the edited code the above to the page’s custom css box:
Your fix is better but still not the best. Now when the button is in mobile, the button text is off center. This seems like something that should be fixed within the theme. The purpose of a button is to link to something, and the theme as it is, distorts buttons when a link is added. Can this be fixed instead of just patched with code that renders subpar results?
This is styling so it will be css. The code i send you, while being added in the Custom Css box, it is safe from future theme updates.
We will certainly check this out for the next theme update, but every change will still be a css code, this time added in the style.css file instead of Custom css box.
So to arrange the text alignment, please add this css too:
.vc_btn3.vc_btn3-size-lg {
padding: 18px 82px !important;
}
Thank you for the additional code. It solves the issue in mobile but has varying effects on the button while it is scaling down. This is fine in the meantime but definitely something that needs to be solved on a higher level so that the buttons scale down properly and look good like they do when there is no link.
I have already notified the developers. We will take a closer look on it for the upcoming theme update and improve the mobile experience of the button.
Thank you for noticing it and letting us know. Please let me know if there is anything else i can do for you for the moment being.
