How to Design Window Popups for Desktop and Mobile (Best Practices)

Designing a popup that looks great on both desktop and mobile can be tricky — especially when it comes to adjusting size, image, layout, and ensuring everything looks perfect on different screen sizes. However, by following a few simple tips below, you can quickly create popups that look great and perform well on any device. 💡

✅ Simple Approach (Auto-Responsive)

If your popup has a simple layout, you can just create one popup and let it auto-adjust:

• On mobile, it will auto-resize to 80% of the screen width.

• The image will automatically move to the top on mobile to ensure better display and responsiveness.

💡 Recommended for: Quick announcements, minimal content, or when design differences between desktop and mobile are not critical.

✅ Best Practice (Separate Popups for Desktop and Mobile)

If you want full control over the layout, including: ✔ Different images for mobile ✔ Adjusting width, gap, spacing, or font size ✔ Precise alignment for each screen type

➡ Create two separate popups — one for desktop and one for mobile.

This gives you complete flexibility and ensures a flawless experience across devices.

🛠️ Step-by-Step Guide

🔹 Step 1: Create the Desktop Popup

1. Create a new popup and configure all necessary elements: content, style, image, schedule, targeting, etc.

2. Go to Target > Devices → Select “Show on Desktop Only”

3. Click Save

🔹 Step 2: Create the Mobile Version

1. Go back to the popup list → Click Duplicate on the popup you just created

   
2. Edit and rename the duplicated popup (e.g., "My Popup – Mobile")

   
3. In the new popup:

   • Go to Target > Devices → Select “Show on Mobile Only”

     
   • Set a Popup Width of around 300px — ideal fixed width for mobile

     
   • Adjust the image if needed (change size or orientation)

     
   • Tweak text size, spacing, layout to fit mobile display

4. Click Save

🔹 Step 3: Preview & Test

1. Turn on both popups and use Preview mode or test directly on real devices (desktop & phone) to confirm everything displays as expected.

🤝 Need Help?

If you’re unsure how to adjust your popup for mobile, just reach out — we’re happy to help!

📩 [email protected] 💬 Or via Live Chat in the app.