Media Queries

Advanced Columns is designed to put you in control of the behavior of your layouts, by giving you the tools to handle its responsive logic.

Another goal of Advanced Columns is to give you direct visual feedback about how your content will look at different view sizes, right in the Block Editor, without the need of switching to Preview mode, or being forced to save the page.

In the editor

For the Columns and Column blocks, many settings offer responsive support: this means that for those settings, you’ll be able to set completely different values for different breakpoints.

When editing content, an active query is defined at page level: this means that Columns and Column block will display according to the settings that are valid for that specific Media Query.

If a block control supports responsiveness, an icon corresponding to the current Media Query will be shown next to the control label.

By clicking on the icon, you’ll be able to switch to a different query, and contextually set it as active. You’ll also be able to switch the active query by clicking on the appropriate control in the block Inspector Controls.

Inheriting values

By default, all Media Queries inherit their configuration from a master Media Query called “desktop”. In this case, a “Same as: Desktop” text is displayed just below the control label, making it clear which values that field is currently using.

By clicking on this information, you’ll open the override dropdown, that will allow you to pick which Media Query to inherit values from, and even opt to have a completely Custom set of values for that control.

1. Field with queries support.
2. Field in a "mobile" query visualization.
3. The override menu.
4. The query overwritten with the reset button.

Upon first installing the plugin, a “Mobile” Media Query is automatically created for you to use: its breakpoint value is set to the same value that WordPress Core is using to target mobile devices.

Of course, this value can be modified in the plugin Settings Page.