You can manually adjust the size of your CTA or use custom CSS to automatically fill width of the CTA's container or module. If you are embedding an image CTA on your non-HubSpot site , you may need to apply additional CSS declarations (such as width: 100%;) within your stylesheet to make the image CTA responsive.
To edit the size of your button CTA:
In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
In the top left, click the dropdown menu and select CTAs (Legacy).
Hover over a CTA and click the Actions > Edit.
In the slide-in panel, click Advanced options.
To manually resize your custom CTA:
Clear the Fit to text checkbox. This will remove the automatic resizing applied.
In the Button padding section, enter your size values for the button width and button height fields.
Click Next >.
Click Save. Then, click Finish.
To have your custom CTA fill the entire width of its container or module:
Retina optimization makes your CTA's image more crisp when viewed on your site pages and in emails if your recipients view the CTA in modern versions of Apple Mail and iOS mail; this is not supported by Outlook or webmail services like Gmail.
Retina optimization is supported when you upload an image that is at least two times the size necessary for the CTA, similarly to how retina support works for all images across the internet. Please also note the following:
If you're creating a CTA that will be 400px by 100px, the uploaded image would need to be 800px by 200px to support an @2x pixel density display.
CTAs support adding up to a 4x version. For example, if you're creating a CTA that will be 400px by 100px, you can uploading a 1600px by 400px image.
The CTA will automatically be rendered on your website with a srcset attribute serving the 1x, 2x, 3x and 4x version where available.
If the image is uploaded at the size the CTA will be rendered at, it will not have retina support. For example, if a 400px by 100px image is uploaded for a 400px by 100px CTA
Thank you for your feedback, it means a lot to us.