I’m working on building new pop-ups for our website using the new CTAs that are available. I have a few built and published to pop up on desktops. But I had to exclude them from popping up on mobile devices because the pop-up doesn’t resize with the screen enough. When previewing it in the editor, it looks perfectly fine for the mobile screens. But when I look on my phone it looks bad. In the preview, it mentions that responsive styling is not enabled with a link to “Enable responsive styling”. Clicking the link just brings me back to the editor with no options I can find to enable it. Is there a way to solve this?
Hi @AMorton8,
We are glad to have you here 
Let’s test the option! Could you please navigate to the Design tab --> expand the “sizing” menu --> press automatically adjust the height?
That should auto-resize for mobile devices. After that please save the changes and then publish.
When the process is finished, please show me a screenshot of how it looks on the phone. 
Thanks,
Diana
Thanks for the response. I have that option selected already for my CTAs. I did realize that having the image set to fill the container was part of my issue of making the CTA cut out words and other parts of the image. I currently have our graphic designer working on resaving the images as svg. rather than jpg. to see if that will help the image scale better when using that option. Because doing “resize to fit full image” leads to a bunch of empty space I don’t want on the top and bottom of the image. After I get the svg. version of the images and try again I will post an update with screenshots.
Thanks for highlighting this issue,
Any solution yet to the un-responsive CTAs?
@DianaGomez ok, so I have some screenshots now to share what we’re looking to accomplish, compared to what we’re getting. Our graphic designer did convert the image to SVG and I have some images of the results of that as well. She is going to have to figure out some weird effects that happened when she converted it, the words got jumbled together. But, as far as the image scaling to fit the container better, there was no real effect.
This image is an example of what we are hoping to achieve for all of our CTAs, but using different images for specific pages.
Live view from Desktop of our CTA (.jpeg image)
This image is a screenshot of the mobile preview from the HubSpot editor of the background image being resized to fit the entire image in the CTA. We can tolerate how this one has the small amount of space above and below the image but would prefer not to have it.
HubSpot editor mobile preview “Fit Entire Image” (.jpeg image)
This image is a screenshot of the mobile preview from the HubSpot editor of the background image being resized to fill the container. We are hoping to have our mobile CTAs look more like this one but with the words and logos not being cut off.
HubSpot editor mobile preview “Fill Container” (.jpeg image)
This image is a screenshot of a live shot of the CTA as seen on my phone with the background image being resized to fit the entire image in the CTA. Notice that it creates an even bigger space above and below the image as well as squishing the form into a single column and placing it in the middle of the CTA, blocking some of our text, rather than at the bottom.
View from my Phone “Fit Entire Image” (.jpeg image)
This image is a screenshot of a live shot of the CTA as seen on my phone with the background image being resized to fill the container of the CTA. Formatting the background like this cuts out a lot of the image as well as squishing the form into a single column.
View from my Phone “Fill Container” (.jpeg image)
This is the desktop preview from the HubSpot Editor of the CTA after converting the image into a .svg format. For the Desktop view, the only change was slight color darkening and the text being jumbled around. As mentioned above, our Graphic Designer will be working to figure that out when she has time.
Desktop preview after SVG conversion (.svg image)
This image is the .svg image live as a mobile CTA as seen on my phone, using the setting “Resize to Fit Entire Image.” It shows that the scaling didn’t really change between the .jpeg and .svg images.
SVG view from my Phone “Fit Entire Image” (.svg image)
This image is the .svg image live as a mobile CTA as seen on my phone using the setting “Resize to Fill Entire Container.” Like the image above, it shows that the scaling didn’t really change between the .jpeg and .svg images.
SVG view from my Phone “Fill Container” (.svg image)
Just an update for anybody who may come across this post in the near future. I did reach out to support before coming here for this post. This is the inquiry and response below.
Alexander Morton
Oct 17, 2023 2:54 PM
New CTA forms, possible auto-sizing to fit mobile.
I’m working with the New CTAs (beta) and trying to create more appealing pop-up forms for our website. I know they are still in Beta, but is there any way to have them autosize to fit into a mobile screen? Or are my only options to create a different CTA for the same page to fit a mobile screen, or resize the one that fits and looks great on a computer screen to fit a mobile screen as well?
If there isn’t an auto-sizing ability available, I think it may be something of benefit to add in the future to these new CTAs. Another observation that may be helpful. If there isn’t a way that auto-sizing can be implemented, maybe have it to where within one call to action, users can build it to fit the mobile and desktop screens separately. Basically, they create two graphics within the one Call to Action. It’s a function we have at my credit union within our online banking’s ad server. We can use the same graphic in two different-sized ads under the same campaign to ensure that it fits both devices, but all the analytics are reported in the same ads.
Sam from HubSpot
Oct 19, 2023 2:12 PM
Hi Alexander,
I see that you are using the BETA CTAs tool and that you are running into an issue sizing the CTA appropriately for smaller screens. You have assessed correctly that we do not currently have a way to adjust for smaller screen sizes in the editor.
As you can read here, “On mobile devices, you can choose to either enable a responsive layout or hide the CTA on small screens in the CTA options.”
At the moment this responsive layout option would need to be custom coded which you can read more about at the link above. I can certainly pass feedback on to the team to let them know that it would be helpful to be able to add this functionality to the drag and drop editor.
Let me know if you have further questions!
Best,
Sam
Hi @AMorton8,
Thank you very much for sharing the answer. It will be very useful for all the users who come across something similar.
I hope you have a great day!
Best regards,
Diana
The only solution we were able to come up with was creating a second pop-up for each of the campaigns, setting those to show only on mobile devices and resizing them to fit only on small screens specifically. So for example, we have a vehicle loan pop up that fits perfectly on a desktop. I took and cloned that pop-up and resized it to fit a mobile device, from there in the settings I excluded desktop devices and set it to show on mobile and tablets. I then went to the settings of the Original pop-up and set it to not show on small screens and went ahead and made an exclusion rule for mobile and tablets for extra measure. It’s a bit of extra work to do the tracking, otherwise, they work well now.
Thanks AMorton8!
Hello, CTA is not working for mobile and tablet device. tried your solution but there is no luck. could you please help me with this.
Any updates on this? I’m still having the same issue…