CTA is not responsive

Developer Support CMS Development
1

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=07c6f50bb6d0b1b330be7435a5012e62” 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?

2

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.