Blog, Website & Page Publishing

Crystal_Hopper
Key Advisor

Lost styling on all CTAs across entire website

SOLVE

I saw an issue on one page where a CTA (that should have the primary button style) shows with Alt Text and a broken image icon. Then noticed all CTAs across the whole site look like this. I've put in a ticket to support. But seriously, what causes this and how do I fix it?

 

The CTAs appear fine in Internet Explorer, but are "broken" in Edge and Chrome. Here's a page to look at:
w w w . c u . n e t / industrial

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Lost styling on all CTAs across entire website

SOLVE

Hi @Crystal_Hopper

as a developer I'm quite surprised that IE is working better then Chrome and (the new) Edge since those two are basicly the same program and Chrome is considered one of the best clients out there.

 

It looks that you're using the default CTA styling. I would always recommend to set CTAs to "Link (no style)" and enter the depending CSS classes in the advanced options of the CTA. By doing this all your CTAs will look and behave the same AND if you change the design inside those classes in the future - it will automaticly be applied to all CTAs on your page which have those classes. 

Here are some classes I've found:

blue CTA: 

cta_button link-style1

(copy/paste those classes into the "CSS class" input field of the CTA)

 

 

hope this helps, 

 

Best, 

Anton

 

Anton Bujanowski Signature

View solution in original post

0 Upvotes
3 Replies 3
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Lost styling on all CTAs across entire website

SOLVE

Hi @Crystal_Hopper

as a developer I'm quite surprised that IE is working better then Chrome and (the new) Edge since those two are basicly the same program and Chrome is considered one of the best clients out there.

 

It looks that you're using the default CTA styling. I would always recommend to set CTAs to "Link (no style)" and enter the depending CSS classes in the advanced options of the CTA. By doing this all your CTAs will look and behave the same AND if you change the design inside those classes in the future - it will automaticly be applied to all CTAs on your page which have those classes. 

Here are some classes I've found:

blue CTA: 

cta_button link-style1

(copy/paste those classes into the "CSS class" input field of the CTA)

 

 

hope this helps, 

 

Best, 

Anton

 

Anton Bujanowski Signature
0 Upvotes
piotr-slezak
Member

Lost styling on all CTAs across entire website

SOLVE

Hi Anton,

 

it looks like I'm in a similar situation as Crystal was at some point and I would like to ask for your advice. I'm using Hubspot CTAs in form of image buttons and I implement them on our company's site through NetlifyCMS. React and Gatsby are responsible for creating the blog posts which display the CTAs.

 

My problem is if I don't remove the two scripts listed below all the styles from the blog posts are removed and the site is, well, broken.

<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(*********, '*******************', {"useNewLoader":"true","region":"na1"}); </script>

 

What I found is I can remove the scripts from the code through regex pattern and in that case the CTAs display correctly and the styling of the site is preserved. However this prevents me from tracking stats of the CTA.  Have you ever came across anything similar? If so maybe you could advise on how to overcome this problem?

0 Upvotes
Crystal_Hopper
Key Advisor

Lost styling on all CTAs across entire website

SOLVE

I also thought that about IE vs the other 2. We've never had to use the classes like that, but I will keep in mind. Thanks for the idea!

 

This is something new that just happened across our whole website. I'm going to see what Support has to say about that before changing things too much. 

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Upvotes