My popup looks wrong on mobile

If your popup looks good on desktop but appears broken, cut off, or hard to use on mobile, work through these checks in order.

1. Use the mobile preview in the editor

Before testing on your phone, switch to the mobile preview in the campaign editor. Click the mobile icon in the Desktop/Mobile toggle in the editor's top bar to see how your popup will look on smaller screens.

If the mobile preview already looks off, fix it in the editor before testing on your actual device.

2. Check your popup size

A popup that's too large will overflow on small screens.

1. Go to the Campaigns page, click Edit design on your campaign, and go to the Styles tab
2. Check the Popup size setting in the Display card
3. Try switching from Default to Small or Extra small if the popup is getting cut off on mobile

3. Check your image settings

Large images are the most common cause of mobile layout issues. (The image section isn't available for gamified campaigns.)

1. Go to the Campaigns page, click Edit design on your campaign, and go to the Styles tab
2. Scroll to the Side/background image section
3. If you're using a side layout (Left of content or Right of content), it may be pushing the form fields off-screen on narrow devices. Try switching the Position to Top of content or Background image instead, or untick Show image on mobile
4. If you're using a background image, adjust the Background opacity slider so text remains readable on smaller screens
5. Check the Scale setting – Fit keeps the full image visible, while Fill may crop it unpredictably on mobile

4. Check your heading and description length

Text that fits comfortably on desktop can overflow or push form fields below the fold on mobile. If your popup requires scrolling on mobile:

• Shorten your heading text
• Shorten or remove the description text
• Use the mobile preview to check the result after each change

5. Check the number of form fields

Every form field takes vertical space. On mobile, a popup with many fields (email + phone + first name + last name + consent checkbox) may require scrolling or push the submit button off-screen.

Consider whether all fields are necessary. Reducing to just email (or email + one additional field) usually gives the best mobile experience.

6. Check your teaser button on mobile

If the teaser button is overlapping other elements or appearing in the wrong spot on mobile:

1. On the Campaigns page, click Edit design on your campaign, then go to the Content tab and scroll to the Teaser section
2. Tick Set different position and offset for mobile
3. Adjust the Mobile position, Mobile offset top/bottom and Mobile offset left/right values until the teaser sits comfortably

7. Check for theme conflicts

In rare cases, your Shopify theme's mobile styles can interfere with the popup layout. If the popup looks correct in the editor preview but broken on your actual phone:

1. Go to Settings > General in the 1ClickPopup app
2. Under Style isolation, change Standard to Strict (Shadow DOM)
3. Test again on your phone

Note: Strict (Shadow DOM) prevents theme interference but may prevent email autofill. Switch back to Standard if autofill is important for your visitors.

8. Check overlay click behavior on mobile

If the popup closes when visitors tap outside it on their phone, go to the Styles tab and check Close campaign on overlay click in the Overlay card. You can set it separately for Desktop and Mobile.

Still not looking right?

Contact us through the chat widget and include:

• Your campaign name
• A screenshot from your phone showing the issue
• Your phone model and browser (e.g., iPhone 15, Safari)

We'll take a look and get it sorted.