CTA Embed Not Mobile Responsive

[SC-seu]

I added an embeddable CTA at the bottom of this page.

It's built as one section with two columns. The CTA's Design > Layout > Enable responsive layout setting is turned on so that at smaller widths, the columns stack. However, for some reason the right column (when stacked), which contains an image, seems to be forcing the CTA to be wider than the mobile screen which is forcing readers to scroll horizontally to read each line. See screenshot below.

I've gone through all of the CTA, section, column, and image Style / Layout settings and haven't found any that resolve this issue. 

Does anyone out there have an idea how I can fix this? Thanks so much!

[SC-seu]

Thanks for the reply @PamCotton. I double checked the image and column settings and no luck. I should mention that we're embedding the CTA on Webflow pages, not Hubspot pages, in case that makes a difference with your recommendations. If not, could you share a resource of where / how to add the custom CSS to resolve this? And even better, an example of the code to be added?

[BrandonGaulin]

@PamCotton  Any update on the question from SC-seu above? I'm having the same issue with CTAs rending weird on mobile for a blog post on WordPress

[PamCotton]

Hey @SC-seu thank you for posting in our Community!

Please ensure the image within your right column is set to be responsive. In HubSpot, images can often be set to automatically adjust their size. Go to the image settings and check for an option like "Responsive" or ensure the width is set to "auto" or "100%." Make sure the container (column) holding the image is set to adjust its width to 100% on smaller screens. If the built-in settings don’t resolve the issue, you can add custom CSS to ensure the image and columns stack correctly on smaller screens. You can add custom CSS in the HubSpot design manager or directly in the page settings

Our top experts, @DanielSanchez and @Anton do you have any other recommendations for @SC-seu ?

Thank you,

Pam