Set the responsive behavior for a widget at different screen sizes

In this guide, we'll explore the Responsive Settings feature for widgets in DecoNetwork's Website Editor. This feature allows you to define responsive CSS tailored to your widget for distinct device sizes. With Responsive Settings, you can customize how your widget appears and behaves on various devices, including desktops, tablets, and smartphones. This ensures that your website delivers an optimal user experience, no matter the device your visitors are using.

To set the custom responsive CSS for a widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the widget icon.
3. Choose the Settings item from the drop-down menu.
   

   The widget Settings popup will be displayed.

   

   You can also double-click on the widget to open the widget Settings popup (excludes Text, Page Title, and Heading Widgets).

4. Click on the Advanced tab.
   
5. Click on the RESPONSIVE SETTINGS row to expand the section.
   
6. Set the CSS for the widget at each supported device size:
   • Wide Monitor
   • Monitor
   • Tablet
   • Mobile

   The Responsive Settings use a mobile-first design approach, meaning any responsive CSS you set for lower screen sizes will also apply to higher screen sizes.

7. Click OK, once you have finished configuring the settings.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.