Responsive Media Chrome Example

This is an example of making Media Chrome responsinve using Container Queries (CQ).

This uses the latest and greatest syntax, specifically using the range operators

@container (420px < inline-size <= 590px)

This allows the example to be a bit more concise. However, this is not supported in the CQ polyfill and if you want to support browsers that do not currently have CQ support you may want to take a look at the Responsive Polyfill example. Though, alternatives will be provided in the comments.

Below is the style tag for this page. Take a look at the code comments that explain the usage.