The purpose of the responsive control options is to set breakpoints and related options for blocks.
Breakpoints are screen width thresholds at which the layout of your website changes in some way. They make your site adapt to different screen sizes so your visitors can have a positive experience on any device, from a large desktop monitor to a smartphone. For example, on a smartphone-sized screen, it’s best to have only one column, but as the size increases, you may want some of your blocks to be side by side.
You can set as many breakpoints as you like, though it’s not necessary to set a breakpoint for every conceivable screen width (or even most of them).
Important: Setting breakpoints will have no effect if you don’t enable the responsive grid under the Setup tab in the options panel and click Save.
The Responsive Control sub-tab provides the following options for each breakpoint:
- Set Breakpoint. Select a value for your breakpoint.
- Custom Width. If you select Custom Width for the breakpoint value, type the value here. Include the unit, such as px or em.
- Min or Max Width. If you select Min Width, the settings you apply for this breakpoint will apply if the viewing window is larger than the breakpoint value. Max width works the same way in the opposite direction: the settings apply if the viewing window is smaller than the value.
- Disable Block Height. Each block has a minimum height determined by how high you made the block in Grid Mode. If the content of the block doesn’t meet or exceed that height, the height will collapse to fit the content based on the breakpoint.
- Attempt to Center Block Elements. HTML elements, such as headings and paragraphs, within the block will be centered.
- Griddify Lists. If you have items arranged in lists in a single column, such as in the pin board block, this setting will break the list into two columns.
- Hide This Block. The block will disappear. This setting is recommended for small screen sizes when a block isn’t essential to your site.
Click the plus and minus buttons in the upper-right corner of each breakpoint section to add and remove breakpoints. You can’t remove the first breakpoint.
To switch it off, change theSet Breakpoint option to Off – No Breakpoint.