Responsive behavior
If you enable this feature then the a-staff Loop output will behave responsively. It means that on smaller screens (mobiles, tablets) the plugin will show less number of boxes in a row for the best user experience.
By default this is option is enabled. Turn it off if you experience layout problems with non-responsive themes.
Responsive breakpoints
Here you can define when to switch to less number of columns (under what window width in pixels). Currently we have a 3-breakpoints set up in a-staff:
The a-staff responsive breakpoints setup tool
- The first value is where we switch from 5 or 6 members / row to 3 members / row layout.
- By default it happens under 1200px screen width.
- This first setting has no effect if you set the Number of columns to 3 or less in your Layout Settings.
- The second one is where we switch from 3 – 6 members / row to 2 members / row
- By default it happens under 960px screen width.
- The third one is where we switch to 1 member / row regardless of your Number of columns setting
- By default it happens under 480px screen width.
Please note that these breakpoints only work if the basic front end CSS is loaded (enabled in Layout Settings). Otherwise you’ll have to set your own responsive CSS rules in your theme’s stylesheets.