CTA not resizing on mobile

[kjavan05]

I am currently working on building out some landing pages and I have noticed when I check how they look on mobile, the CTAs don't resize. I am not a developer and am relying on the templates that were created for our account and just trial and error on my end. I am hoping there is an easy css fix or something to make them resize on mobile. Please help!

[derekcavaliero]

@kjavan05 

Do you have a page where we could see this issue? There's likely a CSS fix that can be done.

[kjavan05]

@derekcavaliero 

Here is a link to the referenced landing page: https://marketing.fleetsmith.com/fully-automated-mdm-0

[derekcavaliero · Accepted solution]

Hey @kjavan05 

Seems like you just need a max-width: 100%; CSS property added to the Custom CSS under the CTA's "Advanced Settings" panel inside the CTA editor:

(Note that this screenshot was taken from a CTA in a portal I have access to)

Do not copy the rules from my the screenshot above - the screenshot is just a means to show you where to add the max-width: 100%; value.

That should keep your CTA from expanding past its parent container. A better means of doing this would be to add a common class to your CTAs and put that rule inside a CSS file on the site to make editing CTA styles easier (if you ever need to update 100's of them at once).

Hopefully that helps.

[kelseygalarza]

I'm not even sure these CTAs have this anymore? Can't figure out how to solve this problem now.