Skip to main content
All CollectionsCreating a new widgetPro widget advanced settings
How do I configure specific widget layouts based on display size?
How do I configure specific widget layouts based on display size?

Find out how you can customize your widget to display a specific layout for your responsive website πŸ€“

Herman Schutte avatar
Written by Herman Schutte
Updated over 7 years ago

If you're a Lite, Pro or Developer plan subscriber, you can customize the layout of your widget based on the screen size of the visitor to your website. This means you can have a smaller 2 x 2 grid display on mobile devices for example, and a larger 4 x 4 grid display on desktops.

To configure these options, edit an existing Pro widget or create a new Pro widget. In the widget configuration screen, click on the Responsive Settings tab.

You can now configure a different layout for each display size. The available display sizes you can configure for your widget are:

Extra Small - For screens smaller than 768px (Smart Phones)
​Small - For screens smaller than 992px (iPads)
​Medium - For screens smaller 1200px (Larger Tablets)
​Large - For screens including and larger than 1200px (Desktops)

To add a new responsive option, choose a display size, set the options and then click the Add button to add the option.Β 

Once you've configured the responsive options for your widget, click on the Update Widget or Get Widget button and copy the code snippet. You can now add this code snippet to your website, or replace your existing code snippet with the new one.

Your widget layout will now adapt based on the size of your visitors' display.

If you're not a Lite, Pro or Developer plan subscriber yet, upgrade today to start your free trial and create your first fully responsive Pro widget!

Did this answer your question?