# CTA Button resizes when published

**URL:** <https://community.hubspot.com/t/cta-button-resizes-when-published/1714>\
**Category:** CMS Development\
**Created:** [April 21, 2017, 11:58am UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714 "2017-04-21T11:58:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [April 21, 2017, 11:58am UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/1 "2017-04-21T11:58:21Z")

</div>

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.

 ![Hubspot_LP2_CTAs zu lang.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/f/7fc60b3eb4ecabfc7dd6662a6014aed6c2e38b69.jpeg)  
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?

Thanks!

 ![Hubspot_LP2_editing.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/a/fa6e074b42cfece5fd9e8876b9f73fa293c0a7c7.jpeg)  
Editing

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [April 21, 2017, 3:13pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/2 "2017-04-21T15:13:25Z")

</div>

Hi [@Elli\_Andre](https://community.hubspot.com/t5/user/viewprofilepage/user-id/7394),

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

```auto
.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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/2/c23cf85e8ca7159c245744efd30932a9b3b72f9d.png)

 ![Screen Shot 2017-04-21 at 11.07.55 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71bd31c99764e8725ec22af3d1500a579be7f4b2.png)

1. Add a seperate class to your CTA button, such as ‘.small-cta’ then set it’s own styles

```auto
.small-cta{
 width:100%;
 max-width:300px;
}

```

Try one of these solutions out and let me know how it goes!

-- Ty

---

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [April 24, 2017, 1:17pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/3 "2017-04-24T13:17:30Z")

</div>

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.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/1/01a48b1cdea6458cabcc2e7d6e79e1d2bcd0476c.jpeg)

 ![2.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/d/1d6b475fa5a62c5ea1b9d19cc9fdb2de321b19f0.jpeg)

 ![3.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71231f28d58931e117cfa91abcbb3796ebbaf7f1.jpeg)

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [April 24, 2017, 1:26pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/4 "2017-04-24T13:26:02Z")

</div>

Hi [@Elli\_Andre](https://community.hubspot.com/t5/user/viewprofilepage/user-id/7394),

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 🙂

 ![Screen Shot 2017-04-24 at 9.23.09 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/5/e53a5cda2f4bc1df8bc7ccc1a6a0641bc973fbf3.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!

```auto
.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.

```auto
.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

---

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [April 24, 2017, 1:34pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/5 "2017-04-24T13:34:00Z")

</div>

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.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/67abed2ae4ffb662ba2416542003958cb1ec15a0.jpeg)

 ![2.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/3/e30eb1881cb6ab98669c381265a978b0741dde8d.jpeg)

---

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [April 25, 2017, 12:13pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/6 "2017-04-25T12:13:51Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [April 25, 2017, 12:18pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/7 "2017-04-25T12:18:44Z")

</div>

![3.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/c/0c32868106b6d0c75c4d708388d4b6aa49098dcf.jpeg)

 ![4.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/1/61cbcc804919a7fc36a8488a4d27ccb9ec49952d.jpeg)

 ![1.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/d/3ded945f744b11067f15ea6eee1fc8e596f97faa.jpeg)

 ![2.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/3/f3f3fc115db15946c4da9588a71226e269a500ab.jpeg)

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [April 25, 2017, 1:14pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/8 "2017-04-25T13:14:32Z")

</div>

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.

```auto
.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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/d/2d84e53c2be4ea80ea7d376f317f84763178bcbe.png)

And here it is on your page:

 ![Screen Shot 2017-04-25 at 9.13.21 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/e/2e5d15aa83a7396bbaa8b32193f737c23a53a822.png)

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

-- Ty

---

<div class="post-metadata">

**Author:** ![Elli\_Andre](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elli_andre/32/57633_2.png) [@Elli\_Andre](https://community.hubspot.com/u/Elli_Andre)\
**Post date:** [August 23, 2017, 2:47pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/9 "2017-08-23T14:47:50Z")

</div>

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](https://www.benefitcardpremium.de/download_bcp_infomaterial?hs_preview=HUqinhLV-5309220154)

 ![BCP Info Stack_ Edit Mode.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/a/5a8142105bf4b04aa753781a69c3d50e2d089ea3.jpeg)

 ![BCP Info Stack_ Preview_Mode.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/2/6200e81c91e1d4d79f81dfa60f8c890a5a12f962.png)  
It 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…

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [August 23, 2017, 3:40pm UTC](https://community.hubspot.com/t/cta-button-resizes-when-published/1714/10 "2017-08-23T15:40:37Z")

</div>

Hey [@Elli\_Andre](https://community.hubspot.com/t5/user/viewprofilepage/user-id/7394),

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/2/a218a65677535ba4b1aaf45edcda016035f4ec65.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