Your Primer lightboxes are viewed on a variety of user devices. Different brands of smartphones, tablets, and desktop computers have unique screen sizes that impact the look and feel of your lightboxes. It's important that your customers have the best experience possible when interacting with your Primer lightboxes no matter what device they use. Primer's new Responsive Width Breakpoints feature helps you configure your lightboxes so that they display correctly across different devices.
Responsive Width Breakpoints allow you to:
- Control how your widgets will look on different screen sizes
- Create up to 4 different versions of a widget
- Individually modify each version of a widget by dragging and dropping form elements
Using Responsive Width Breakpoints
- To get started with Responsive Width Breakpoints, click on the plus button as shown below:
- Add in the threshold pixel width. If the user's screen size is equal to or under this width, the custom variation you are about to create will display. In this example, we're creating a variation that displays at screen widths of 370 px or less. Click on the disk icon to save this variation.
- Customize this variation by adjusting the form dimensions (width must be 370 px or less) and form elements. At any point, you can return to the original version by clicking the return icon as shown below:
- Create up to 4 other variations as needed. For example, create one variation with a width of 720 px that will display between 370 px and 720 px.