Mobile Lightbox Design Best Practices

three examples of mobile responsive pop-up forms

It’s important to design mobile-friendly widgets and lightboxes. There are 3 ways to create mobile-friendly designs. Which choice you make depends on your goals and needs.

  1. Responsive Settings, great for simple designs.
  2. Breakpoints, a good idea if your desktop version is wide and has lots of small text or details that wouldn’t resize well. We recommend setting your mobile breakpoint’s max width to 515px.*
  3. Separate mobile design, perfect for separate stat tracking for mobile and desktop users, and suggested if you’re using a lot of custom CSS in your design.

*The 515px breakpoint is great for responsive designs, however if your design isn’t responsive, the breakpoint should be set to the same width as your desktop design so nothing cuts off when you switch. For example if you have a 1000px wide Edge to Edge design, you want to make your breakpoint also 1000px wide so once your screen is smaller than your current design, the breakpoint gets loaded.

Recommended Dimensions for Mobile

Screen sizes vary across mobile devices, but we recommend making your mobile designs between 300 x 400 and 375 x 667.

For more information, see our Recommended Widget Dimensions help doc.

Think Big

Since mobile users see your website on a smaller screen, the design must be easy-to-read, and forms should be easy to complete on a touch screen.

a mobile capture pop-up with small form fields, and a mobile pop-up with mobile-friendly form fields

Create large buttons and fields that are easy to tap. Try not to make any elements too close together or too small to tap easily.

Room to Breathe

Be mindful of text that is too close to the edge of the design. It might cut off on some devices.

Keep Form Input Text 16px or Larger

If you want to avoid auto-zooming on iPhone when you tap on an input field, your font needs to be set to 16px or larger.

For touch screen users, we recommend making your mobile buttons the full width of your form.

Easy-to-Tap Close Buttons

Close buttons are notorious for being too small or hard-to-find on mobile. Some devices zoom in when you tap forms, making the mobile button impossible to reach. While the zoom is useful for filling out forms, you don’t want to block visitors from seeing your site.

In the example below, the close “x” in the top-right corner cuts on some devices.

Making a box slightly narrower than your screen size helps. But the most reliable way to make sure your widget can be closed is to add a “no thanks” button in the center of your widget, under the form. That way, there’s no missing it.

Responsive Mobile Designs

Even if you create a separate box for mobile visitors, it’s a good idea to make that box responsive.

animation of an email capture pop-up being resized to simulate mobile dimensions

Since every device is different, the best way to guarantee that your mobile designs will work is responsive design. That way, no matter the screen size, your box will fit.

For more information on Responsive settings, read our Responsive Settings help doc.


Lastly, we highly recommend testing your mobile boxes on a mobile device, not just a resized browser window. This provides the most accurate results.

screenshot of a responsive pop-up form being tested on a mobile device

How do I test boxes on my site?