CMS Development

AGray65
Member

CTA is not responsive

SOLVE

So I'm trying to embed a cta into a page (new CTA, not legacy) and even though I am setting the thing to be responsive, it is still getting fixed dimensions in the code output. 

 

<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-170715962685 hs-cta-embed__loaded" style="max-width:100%; max-height:100%; width:400px;height:335px" data-hubspot-wrapper-cta-id="170715962685">

<iframe src="https://23183164.hs-sites.com/hs-web-interactive-23183164-170715962685?utk=07c6f50bb6d0b1b330be7435a..." aria-label="Embedded CTA" title="Embedded CTA" allow="autoplay; fullscreen;" data-test-id="interactive-frame" class="go812842568" style="border: none; height: 100%; width: 100%;"></iframe></div>

 

No matter what I do I can't get the CTA to scale down far enough for mobile views. I can set the parent container to overflow: hidden but this isn't really the greatest solution. Anyone know a work around?

0 Upvotes
1 Accepted solution
evaldas
Solution
Guide | Platinum Partner
Guide | Platinum Partner

CTA is not responsive

SOLVE

Hi @AGray65 

 

Was running into the same issue and thought it was a bug but HubSpot support confirmed the code is generated as intended.

 

The proposed solution is to set the immediate parent container (of the <div class="hs-cta-embed...">) to "max-width: 100%" - which worked in our case.


✔️ Did this post help answer your query? Help the community by marking it as a solution.

View solution in original post

0 Upvotes
1 Reply 1
evaldas
Solution
Guide | Platinum Partner
Guide | Platinum Partner

CTA is not responsive

SOLVE

Hi @AGray65 

 

Was running into the same issue and thought it was a bug but HubSpot support confirmed the code is generated as intended.

 

The proposed solution is to set the immediate parent container (of the <div class="hs-cta-embed...">) to "max-width: 100%" - which worked in our case.


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes