Media Queries management

The “Media Queries” section allows you to define the breakpoints that can be used in Columns and Column blocks, for all controls that support responsiveness. By default, when the plugin is installed, a “mobile” breakpoint is automatically generated: the value used for the “mobile” media query is the value that is generally used by WordPress Core to target mobile devices.

In the free version of the plugin, it is only possible to create one breakpoint.

Creating custom Media Queries

When adding a new Media Query, an editing modal will be presented to you (this feature is only available in the Pro version of the plugin). The same modal is shown when you click on the pencil icon in a previously-saved Media Query, to edit its value.

For each breakpoint, you can choose a label, an icon, and a value that represents the max-width value for that specific breakpoint.

You can also specify what values should that Media Query inherit from, when blocks are first inserted in the page. For example, if you create a “Tablet” breakpoint, you may wish to make it inherit from the default Desktop Media Query; likewise, for a “Mobile” Media Query, one might choose to inherit the “Tablet” value by default, thus creating a sort of chain of dependencies across Media Queries.

In the Pro version of Advanced Columns, Media Queries can also be ordered, by dragging their respective handle up or down. The order in which Media Queries are saved corresponds to the order you see in the settings page; this order has a particular relevance, since it’s the order the plugin is going to use to print CSS on the frontend.