How to customize the mobile layout of a Nudgesmart popup
Override fonts, sizes, and spacing for mobile shoppers using desktop-first inheritance — without breaking your desktop design.
Mobile shoppers see the same popup as desktop shoppers unless you tell Nudgesmart otherwise. A few small overrides on the parts that don't fit a phone screen go a long way.
TL;DR
Open your popup in the visual editor, click the Mobile button in the device toggle, and adjust the parts that don't read well on a phone — usually the headline font size, the hero image, and the padding around buttons. Every property defaults to inheriting its desktop value, so you only override what you need. Click the reset button next to any overridden property to send it back to inheriting. As a rule of thumb, desktop hero text at 40 pixels or larger almost always needs an explicit 16-pixel mobile value.
How desktop-first inheritance works
Nudgesmart's editor is desktop-first. Every property — font size, color, padding, image, button width — has a desktop value, and your mobile layout starts by inheriting those values. When you switch to the Mobile view and change a property, you're not editing the desktop design; you're creating a mobile-only override that leaves desktop untouched.
This is the same approach the modern web is built around — design once, then layer on adjustments where the smaller screen needs them. (Web.dev's responsive design overview is a useful primer.) In Nudgesmart it means:
- Edits made on Desktop apply to mobile by default. Tweaking the headline copy or button text on Desktop carries through to mobile automatically.
- Edits made on Mobile only apply to mobile. Setting the headline to 16 pixels on Mobile leaves desktop at whatever you originally chose.
- You can always undo a mobile override and go back to inheriting from desktop.
Each property in the Mobile view shows which of three states it's in — Inherited, Override, or Default — using a small badge.
Step 1 · Switch to mobile
Open your campaign in the visual editor and find the device toggle at the top of the canvas. Click the Mobile button.
Visual editor canvas with the Desktop and Mobile device toggle buttons at the top, with Mobile selected and the popup canvas resized to a phone width
Screenshot coming soon
The canvas resizes to a phone-width preview, and any property panel you open from now on edits the mobile layout only. To go back to editing your desktop design, click Desktop in the same toggle.
Step 2 · Override font size and spacing
Click any element in the canvas to open its property panel. Each property in Mobile view shows an inheritance badge — Inherited, Override, or Default — so you can see at a glance what's been customized.
Property panel in mobile viewport showing font size with an Inherited badge in green, with the desktop value listed underneath
Screenshot coming soon
The three states in plain terms:
- Inherited (green) — the mobile value is borrowed from your desktop design. This is the default for every property.
- Override (yellow) — you've set a mobile-specific value. The desktop design is unchanged; only mobile uses this number.
- Default — the property hasn't been set on either desktop or mobile, so the popup falls back to a built-in default.
To create an override, change the value in the input. The badge flips from Inherited to Override, and the desktop value stays listed underneath as a reference.
The properties most worth overriding on mobile:
- Headline font size. Big desktop hero text rarely fits a phone screen as-is.
- Padding around buttons and inputs. Generous desktop padding can squeeze the close button against the popup edge on mobile.
- Image size or image swap. A wide hero image that frames the message on desktop can dominate the entire screen on mobile.
Override only the properties that look wrong in the mobile preview. Leaving a property as Inherited is almost always the right default.
Step 3 · Reset an override back to inherited
When a property has been overridden, a reset button appears next to it. Click the reset button to clear the override and go back to inheriting the desktop value.
Mobile property panel showing a font size with an Override badge in yellow and a reset button next to it
Screenshot coming soon
The reset button only appears in the Mobile view — there's nothing to reset on desktop. Use it whenever:
- You experimented with an override and decided the desktop value was fine.
- You changed the desktop design and want mobile to follow along.
- You inherited a template and want to wipe its mobile customizations to start fresh.
After resetting, the badge flips back to Inherited, and any future change on Desktop carries through to mobile again.
Step 4 · Mobile-specific image (optional)
Image elements can be overridden the same way as a font size — open the image's property panel in Mobile view and set a different image URL.
This is useful when your desktop hero image is wide and landscape-oriented but a square or portrait crop fits better on a phone, or when you have brand assets sized specifically for small screens. If you don't override the image, mobile inherits whatever desktop uses — usually the right default.
Step 5 · Test on a real phone
Before publishing, open your storefront on your actual phone — not just the editor's mobile preview — and trigger the popup the way a shopper would.
Real phones add things the editor preview can't fully simulate: the soft keyboard over an email input, the browser's address bar resizing, real touch targets, and your actual font rendering.
Test the parts most likely to break:
- Tap the close button. Is it big enough to hit cleanly with a thumb?
- Tap the email or phone input. Does the soft keyboard cover the submit button?
- Read the headline. Does the text fit on one or two lines, or spill awkwardly to four?
If anything looks off, switch back to the editor, override the property on Mobile, and re-test.
Common pitfalls
- Editing on Mobile and not realizing desktop was unchanged. Mobile edits don't bleed into desktop. To change both, switch to Desktop first, then come back to Mobile to refine.
- Overriding too much. Every override is one more thing to maintain. If you change the headline on Desktop later, any mobile property you've overridden won't pick up the change.
- Setting everything up twice. You don't need to. Set the desktop design completely, then switch to Mobile and only adjust the things that don't translate.
- Testing only in the editor preview. Editor preview catches sizing issues but misses keyboard behavior, font rendering, and touch targets. Always do a final pass on a real phone.
Frequently asked questions
Do mobile overrides slow down my site?
No. Mobile overrides are stored alongside desktop values in the same campaign — no extra requests or files. The popup loads the same way regardless of how many properties you've customized for mobile.
What happens if I reset a mobile override?
The property goes back to Inherited — the same as never having set a mobile value. A property is always Inherited, Override, or Default.
Can I copy mobile overrides between campaigns?
Not directly today. The fastest path is to duplicate a campaign that already has mobile overrides set up — the mobile-specific values come along with the duplicate.
Does the mobile layout apply to tablets too?
The Mobile view targets phone-sized screens. Tablets typically render the desktop layout because their screens are wide enough.