---
title: Widgets on mobile
slug: widgets-mobile
description: How Personizely widgets behave on mobile: the 480 px breakpoint, mobile edits in the builder, per-element device visibility, ergonomic popups, touch triggers.
docTags: 
createdAt: 2026-10-16T20:22:26.901Z
---

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](docId\:vR58N_wd6XJgoJ_q1-Ixo) 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                                                                                                        |
| [Exit-intent trigger](docId\:lo2ZnWIQG9Ch3GYd5TUcM) | 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.

## Related

- [Popups](docId\:bcCNuKORl33wqUzZ0ExQV)
- [Styling widget elements](docId:-C1I2ZML0etENDY_75xiP)
- [Exit-intent trigger](docId\:lo2ZnWIQG9Ch3GYd5TUcM)
- [Device filter](docId\:vR58N_wd6XJgoJ_q1-Ixo)
- [Widget display options](docId:8NC793U5QIUsJC_fdn80A)