I have encountered a problem with my cta buttons when making a landing page. The design (font/colour/shape) is set by default but I am able to edit the size and name as well as the link.
Saved/PublishedSo my problem is: I have set a cta and inserted it into the content body. It seems fine in size and position. When saved and published the size is not at all what I had set and spans over the whole text body. Maybe somebody knows what I am doing wrong and can give me a hint?
What this will do is now target all of the ctas you create with this class. Removing the max-width property makes them scalable based on their text (which is why they were getting cropped).
Here's how it looks in the CTA tool
And here it is on your page:
Let me know if this is closer to what you were looking for!
The thing that is giving you problems is width: 100% !important; What this does is makes your .cta_button class 100% of the width of their parent element & '!important' makes that specific style take priority over others. So you have a couple options here to fix it.
Remove your "width: 100% !important" and set a physical width, such as: width: 300px;
Keep 100% width, but also add a max width, like: max-width: 300px;
Add custom CSS in you CTA tool, like this (I didn't save anything on your ctas, you will have to readd the code):
Add a seperate class to your CTA button, such as '.small-cta' then set it's own styles
.small-cta{
width:100%;
max-width:300px;
}
Try one of these solutions out and let me know how it goes!
I've included the correct snipped and set the class to small-cta like in the snippet. The preview shows that it isnt centered and when I go onto the editor mode its cropped too. (PICS 1+2)
I tried setting the class to .medium-cta and kept the code snippet, resulting into a correct aligned preview (PICS 3+4) and the original problem (correct appearance in the editor mode of the LP, but in the final preview appearing way to big)
What this will do is now target all of the ctas you create with this class. Removing the max-width property makes them scalable based on their text (which is why they were getting cropped).
Here's how it looks in the CTA tool
And here it is on your page:
Let me know if this is closer to what you were looking for!
I took a look at your page again and noticed that you did delcare the styles, except you never set a class. I updated this for you, but you need to declare the class name in that dialog as welll 🙂
Edit: Just saw this, you are going to want to use this code snippet instead so that your buttons are centered, my mistake for not including it!
Also, all of your CTA styles are controlled by this is in your "Primary CSS File" on line 1338, incase you want to update the ctas globally. Changing any of these will update every single CTA, on your site.