How to Design Window Popups for Desktop and Mobile (Best Practices)
PreviousHow to Send Discount Codes to Customers After Signing UpNextWhat’s the difference between Countdown Timer and Schedule Time?
Last updated
Was this helpful?
Last updated
Was this helpful?
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. 💡
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.
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 1: Create the Desktop Popup
Create a new popup and configure all necessary elements: content, style, image, schedule, targeting, etc.
Click Save
🔹 Step 2: Create the Mobile Version
Go back to the popup list → Click Duplicate on the popup you just created
Edit and rename the duplicated popup (e.g., "My Popup – Mobile")
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
Click Save
🔹 Step 3: Preview & Test
Turn on both popups and use Preview mode or test directly on real devices (desktop & phone) to confirm everything displays as expected.
If you’re unsure how to adjust your popup for mobile, just reach out — we’re happy to help!
Go to Target > Devices → Select “Show on Desktop Only”
📩 💬 Or via Live Chat in the app.
