Community Discussions

HubSpot Sales

HubSpot Agency Partner Kick-Off

HubSpot Marketing

COS Design

HubSpot Ideas

Search, post, and collaborate on how we can improve HubSpot products

HubSpot Agency Partner Kickoff 2017 Q&A

Academy

Support Resources

Internal Knowledge Base

Showing results for 
Search instead for 
Did you mean: 
Highlighted
New Contributor
Joined April-2017
Posts: 8

CTA Button resizes when published

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

0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Community Manager
Community Manager
Joined October-2016
Posts: 94

Re: CTA Button resizes when published

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

0 Kudos
Reply
7 REPLIES
Community Manager
Community Manager
Joined October-2016
Posts: 94

Re: CTA Button resizes when published

[ Edited ]

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

0 Kudos
Reply
New Contributor
Joined April-2017
Posts: 8

Re: CTA Button resizes when published

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

0 Kudos
Reply
Community Manager
Community Manager
Joined October-2016
Posts: 94

Re: CTA Button resizes when published

[ Edited ]

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

Reply
New Contributor
Joined April-2017
Posts: 8

Re: CTA Button resizes when published

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

0 Kudos
Reply
New Contributor
Joined April-2017
Posts: 8

Re: CTA Button resizes when published

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) 

 

 

0 Kudos
Reply
New Contributor
Joined April-2017
Posts: 8

Re: CTA Button resizes when published

3.JPG4.JPG1.JPG2.JPG

0 Kudos
Reply
Community Manager
Community Manager
Joined October-2016
Posts: 94

Re: CTA Button resizes when published

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

0 Kudos
Reply