How to Use Responsive Width Breakpoints to Design Responsive Boxes

Because visitors browse your site on mobile phones, tablets, and desktops, you should ensure your boxes look great on all devices. Not only does this provide a better experience for your users; it can also help you increase form conversions, particularly for mobile visitors.

With the responsive width breakpoints in the Digioh editor, you can:

  • Control exactly what your widgets look like at different screen sizes.
  • Start from one design and create up to 4 versions of each widget.
  • Modify each version independently by dragging and dropping form elements.

Watch the video for a quick overview of our responsive width breakpoints:

Note: responsive breakpoints are helpful if you want to show the same offer to users on all devices; however, if you want to display different boxes to visitors on particular devices, you can use our conditions editor to target visitors with a certain lightbox based on what type of device they use.

How to Use Responsive Breakpoints in Digioh

  1. To add responsive width breakpoints to a box, open the Editor and click the plus button in the top-right corner: edit responsive breakpoints in Digioh
  2. Add the threshold pixel width (i.e., if the screen size is under this width, the custom variation will display). In this example, we’re creating a variation that displays at screen widths of 370 px or less. Click the “disk” icon to save this variation. add new breakpoint
  3. Customize this variation by adjusting form dimensions (width must be 370 px or less) and elements. Preview to check how it looks. You can return to the original version at any time by clicking the “return” icon as shown below:save responsive width breakpoint
  4. Repeat Steps 1-3 to create other variations as needed. For example, if you create another breakpoint at 720 px, that box will display on screens between 370 px-720 px.

You can create up to 4 breakpoint variations of your boxes.

Have more questions about breakpoints or responsive design? Send us an email, and we’ll help you out!

Related Reading:

Tagged: