Responsive Media Query Examples

The css rules for the examples in this demo page below are in the head tag of this individual html file. View the source code and you can see it all.

Simple Example: Background-color Change

This box is scripted to change background color when its width is 600px or smaller.

Simple Example: Background-image Change

The background-image that gets loaded into this div (called 'background_change') is scripted to load a different background-image when the div is displayed at 600px or smaller.

Example: Simple Responsive Layout Change

This div is a child in a grid that is set to have three 1fr columns when the screen is wider. The grid is set to change to 1fr when it's in mobile size, so the grid children stack on top of each other for phones.
This div is a child in a grid that is set to have three 1fr columns when the screen is wider. The grid is set to change to 1fr when it's in mobile size, so the grid children stack on top of each other for phones.

This paragraph is a child in a grid that is set to have three 1fr columns when the screen is wider. The grid is set to change to 1fr when it's in mobile size, so the grid children stack on top of each other for phones.

Example: Responsive Navigation

The main CSS file for our whole camp site has many other example of design changes made through media queries. You can view the master CSS file with more media queries to study here.