How to resize your ConvertKit pop-up form to make the whole thing show on mobile
ConvertKit is my email marketing server of choice (if you click that link, you can try it out for yourself). ConvertKit is my favorite because it seamlessly integrates with all of the systems that I use: Squarespace, namely.
Within ConvertKit, you’re able to create pop-up forms, or modal forms as they call them, and they will display as a popup when someone visits your site.
Should you use popups? That’s a question for another day.
If you are using a popup, there’s a critical piece of coding you need to add into the custom CSS option for your modal form. Don’t worry, it’s super simple.
The problem: Popups always look awesome on desktop. The problem is that they don’t always look awesome on mobile.
If you have a popup on your website, you need to make sure that:
The whole form is visible on mobile devices
The form does not go off the edges on mobile devices
The “x” button, to get out of it, is easy to see and find on mobile devices
If you don’t make sure all of these three things are taken care of, you’re more likely to have someone leave your site. Why? It’s annoying when you can’t get out of a popup on a website, am I right?!
The bigger problem: this used to happen automatically, but I’ve noticed that a lot of forms aren’t showing properly on mobile recently.
It’s on you to make sure that folks who are on your site are able to get out of a popup ad if you have one, so let’s go over the solution.
The solution: Insert the code below into your custom CSS section of your convertkit form. This will resize your form on mobile only and allow the whole popup to show, along with the X button to get out of it. You’ll see a demo below and the code is below.
This is what a ConvertKit form looks like on the back end. What we need to do is paste the code below into the “custom css” box.
The code you need to place inside that box:
@media only screen and (max-width: 500px) {
:global(.formkit-close) {
right: 0 !important;
color: #666 !important;
z-index: 999999 !important;
}
:global(.formkit-modal) {
max-width: 85% !important;
margin: 0 auto !important;
}
}
Important: you may need to change the “color:#” number to your HEX code, or to black (#000000) but this will be person dependent.
Have questions? Let me know!