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 preview toggle (top of the preview panel) 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 display size

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

Open your campaign and go to the Styles tab
Check the Display size setting
Try switching 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.

Open your campaign and go to the Styles tab
Scroll to the Side/background image section
If you're using a side layout, it may be pushing the form fields off-screen on narrow devices. Try switching the position to Background image instead, or toggle off Show image on mobile
If you're using a background image, adjust the Background opacity slider so text remains readable on smaller screens
Check the Image 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:

Open the Content tab and scroll to the Teaser section
Check if different position for mobile is toggled on
Adjust the mobile-specific position and offset 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:

Go to Settings in the 1ClickPopup app
Change Style isolation from "Standard" to "Strict Shadow DOM"
Test again on your phone

Note: Strict Shadow DOM prevents theme interference but disables browser autofill on form fields. Switch back to Standard if autofill is important for your visitors.

Still not looking right?

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.