WP container queries using Microthemer

Container queries allow you to apply different styling depending on the size of a designated HTML element. They differ from media queries, which only allow you to apply different styling depending on the size of the browser viewport.

Setup Container Queries

1. You add container queries in Microthemer alongside media queries.
2. To help you get started there is a Container queries set you can load via the Load an alternative media query set option.
3. Remember to set Overwrite your existing media queries? to No.
4. Click the “Update Media Queries” button.
5. New container query tabs will display at the top of the Microthemer interface, alongside your media queries.

If you hover over a container query tab, you will see the code for it, which uses @container instead of @media e.g.

@container (max-width: 900px)

Note: unlike with media queries, the site preview viewport does not change when switching between container query tabs, as they so not relate to the viewport.

Designate elements as containers

In order for your container query styles to take effect, you must actively designate an element as a container. This effectively tells the browser to watch for changes in its size, so it can apply new styling if necessary. Two new CSS properties have been added to the Behaviour property group to support this:

• container-type
• container-name

Note: it’s important to set the above properties on the All Devices tab, or in advanced cases on a media query tab, but not on a container query tab. Otherwise it simply won’t work.

container-type

Use container-type to specify what changes to look for. For instance, container-type: size checks for changes in height and width. Whereas container-type: inline-size only checks for width changes (or only height on occasions when the inline-axis is vertical).

container-name

Use container-name if you need to ensure that your container query only applies to a particular element with container-type set on it. For instance, if you set the following CSS properties on a header element:

container-type: inline-size; 
container-name: header

You can then ensure that a container query only applies to the header element using:

@container header (min-width: 700px)

Microthemer is a visual CSS Editor or WordPress. Try Microthemer now!