CTA Button resizes when published

SOLVE
Highlighted
Occasional Contributor

Hi there,

 

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/PublishedSaved/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? 

Thanks!

EditingEditing

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Community Manager
Community Manager

Alright, so this is what I did and it seems to be working now:

 

I swapped the class back to 'small-cta', then moved this set of styles into your main css file (line 1365), I marked that it was from me aswell.

.small-cta{
  margin: 0 auto !important;
  display: block;
  /*reset float property*/
  float: none !important;
}

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

Screen Shot 2017-04-25 at 9.12.13 AM.png

And here it is on your page:

Screen Shot 2017-04-25 at 9.13.21 AM.png

Let me know if this is closer to what you were looking for!

 

-- Ty

Reply
0 Upvotes
9 Replies
Community Manager
Community Manager

Hi @Elli_Andre,

 

I took a look at your site and realized in your CSS (on line 1338) you are declaring this class+style

 

.cta_button {
    display: block !important;
    float: left !important;
    font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important;
    font-size: 1.1em;
    font-weight: 800 !important;
    line-height: 1em;
    letter-spacing: 0.01em !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 0 !important;
    width: 100% !important;
    background: #ffa02f !important;
    border: 2px solid transparent !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px !important;
    box-shadow: 0 0 0 transparent !important;
    -webkit-box-shadow: 0 0 0 transparent !important;
    -moz-box-shadow: 0 0 0 transparent !important;
    color: white !important;
    transition: all 300ms ease;
}

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.

  1. Remove your "width: 100% !important" and set a physical width, such as: width: 300px;
  2. Keep 100% width, but also add a max width, like:   max-width: 300px;
  3. Add custom CSS in you CTA tool, like this (I didn't save anything on your ctas, you will have to readd the code):
    Screen Shot 2017-04-21 at 11.07.32 AM.png
    Screen Shot 2017-04-21 at 11.07.55 AM.png
  4. 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!

 

-- Ty

Reply
0 Upvotes
Occasional Contributor

Hello Ty,

 

thanks for your reply! 

I tried the suggested changes but with no sucess on the final appearance. 

I went with the options 2-4 and I have the same problem again: in editing it appears fine but the result (before publishing) is the big cta again. 

 

1.JPG2.JPG3.JPG

Reply
0 Upvotes
Community Manager
Community Manager

Hi @Elli_Andre,

 

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 Smiley Happy

 

Screen Shot 2017-04-24 at 9.23.09 AM.png

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!

 

.small-cta{
  width:100%;
  max-width:300px;
  margin:0 auto;
  display:block;
  /*reset float property*/
  float: none !important;
}

 

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.

.cta_button {
    display: block !important;
    float: left !important;
    font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important;
    font-size: 1.1em;
    font-weight: 800 !important;
    line-height: 1em;
    letter-spacing: 0.01em !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 0 !important;
    width: 100% !important;
    background: #ffa02f !important;
    border: 2px solid transparent !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px !important;
    box-shadow: 0 0 0 transparent !important;
    -webkit-box-shadow: 0 0 0 transparent !important;
    -moz-box-shadow: 0 0 0 transparent !important;
    color: white !important;
    transition: all 300ms ease;
}

 

Let me know how this works out for you!

-- Ty

Occasional Contributor

hi and thanks. I did set the cta but then it threw out the padding and still showed up wrong on the landing page.1.JPG2.JPG

Reply
0 Upvotes
Occasional Contributor

well I seem to do it wrong :-(

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) 

 

 

Reply
0 Upvotes
Occasional Contributor

3.JPG4.JPG1.JPG2.JPG

Reply
0 Upvotes
Community Manager
Community Manager

Alright, so this is what I did and it seems to be working now:

 

I swapped the class back to 'small-cta', then moved this set of styles into your main css file (line 1365), I marked that it was from me aswell.

.small-cta{
  margin: 0 auto !important;
  display: block;
  /*reset float property*/
  float: none !important;
}

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

Screen Shot 2017-04-25 at 9.12.13 AM.png

And here it is on your page:

Screen Shot 2017-04-25 at 9.13.21 AM.png

Let me know if this is closer to what you were looking for!

 

-- Ty

Reply
0 Upvotes
Occasional Contributor

Hello Ty,

 

since you've helped me so much with the last issue and I am having trouble with a resized CTA again, I was wondering if you could help me? 

I have put in this CTA

<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-75521764-0440-4b14-ac6b-ffe98b8adb92"><span class="hs-cta-node hs-cta-75521764-0440-4b14-ac6b-ffe98b8adb92" id="hs-cta-75521764-0440-4b14-ac6b-ffe98b8adb92"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/2560996/75521764-0440-4b14-ac6b-ffe98b8adb92"  target="_blank" ><img class="hs-cta-img" id="hs-cta-img-75521764-0440-4b14-ac6b-ffe98b8adb92" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/2560996/75521764-0440-4b14-ac6b-ffe98b8adb92.png"  alt="Download  Angebotsdokumente"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(2560996, '75521764-0440-4b14-ac6b-ffe98b8adb92', {}); </script></span><!-- end HubSpot Call-to-Action Code -->

 to this LP Draft

 

BCP Info Stack

 

 

BCP Info Stack_ Edit Mode.PNGBCP Info Stack_ Preview_Mode.PNGIt seems fine in the editor mode, but every time I try the preview, the button resized again. I dont know what I am doing wrong...

Reply
0 Upvotes
Community Manager
Community Manager

Hey @Elli_Andre,

 

I took a look at your site and it seems that you are setting a width:100% !important; on your default CTA class in your CSS. See this image:

Screen Shot 2017-08-23 at 11.35.37 AM.png

So now, anytime that class appears, your cta will fill 100% of it's container. You could do a few options here:

  1. Remove this width, then set the width on your ctas on a case-by-case basis
  2. Keep this width, but set a max-width on your ctas on a case-by-case basis
  3. Set a max-width on your containers on a case-by-case basis

If your cta is going to be block-level in it's own row, then I would opt to set a max-width on it's container.

 

Let me know if you have any questions,

Ty

Reply
0 Upvotes