Widgets on mobile
Every Personizely widget is responsive: one widget serves desktop and mobile visitors, with a separate set of style edits for small screens. You can also show elements on one kind of screen only, dock popups to the bottom of phones, and choose triggers that work with touch. To show a widget only to mobile or only to desktop visitors, use an audience rule.
Available on: all widget types and platforms.
How it works
- The mobile layout applies to screens up to 480 px wide. That covers phones in portrait. Tablets and phones in landscape wider than 480 px get the desktop layout.
- Mobile edits override desktop values. In the builder, switch to Mobile with the device toggle at the top. Any style you change there (size, spacing, font size, layout, position) is saved for screens up to 480 px wide; everything you don't change is inherited from desktop.
- Elements can be shown on one kind of screen only. Each element has a Show on setting: All devices, Mobile or Desktop. Mobile-only elements are hidden on screens wider than 480 px, and desktop-only elements on screens up to 480 px.
- Widgets never overflow a small screen. Popups, callouts and bars are capped at the screen size minus their margin, and scroll inside if their content is taller.
Mobile-specific behavior by widget type
Type | On screens up to 480 px wide |
|---|---|
Popup | With Ergonomic on (the default), docks to the bottom of the screen like a bottom sheet, instead of the center |
Callout | Keeps its position; its width is capped to the screen minus margins |
Bar | Full width; text may wrap to more lines, and top bars push the page down by their actual height |
Embedded | Follows your page's layout |
On all types, the close button is placed 8 px from its corner on small screens so it stays tappable, and the "Powered by Personizely" badge is hidden.
Showing a widget only on mobile or desktop
Element Show on settings hide content, not the whole widget. To show a widget to mobile visitors only, add a Target rule with a target that uses the Device filter filter (for example Device is Mobile). The builder opens in Mobile view automatically for widgets targeted at mobile only.
Device targeting is based on the visitor's device type, while the builder's mobile layout and Show on use the screen width. A tablet is a "tablet" for targeting and gets the desktop layout if it's wider than 480 px.
Triggers on touch devices
Trigger | On phones and tablets |
|---|---|
Landing, Time, Scroll, Inactivity, Click | Work as on desktop |
No mouse, so it uses mobile fallbacks: Back button, tab switch and quick scroll up. Choose them under Mobile fallback | |
Hover | Touch screens have no hover. Don't rely on it for mobile; use Click instead |
Add to cart, Proceeding to checkout | Work as on desktop, on supported platforms |
Behavior details and limitations
- Edits made in Mobile view only affect small screens. If a change seems to have no effect on desktop, check that you're in Desktop view.
- Switching an element's Show on setting switches the builder view to that device, so you see the element you're editing.
- Hidden elements still load. An image set to Desktop is still part of the widget on phones, just not displayed. For heavy media, consider separate widgets for mobile and desktop.
- Mobile keyboards cover the bottom of the screen. Test ergonomic popups with forms on real phones.
Examples
- Bottom-sheet email capture: a popup with Ergonomic on, 100% width in Mobile view, larger buttons, and the hero image set to Desktop only.
- Different copy per screen: two headline elements, one Show on: Desktop with a long message and one Show on: Mobile with a short one.
- Mobile-only exit offer: an exit-intent popup with a Target rule for mobile devices and the Scroll and Back button fallbacks.
Troubleshooting
- The popup is centered on my phone, not docked → Ergonomic is off, or the screen is wider than 480 px (for example in landscape).
- An element is missing on mobile → its Show on is set to Desktop.
- The widget is cut off on a phone → set Overflow to Auto in the widget's Style tab, or reduce sizes in Mobile view.