Responsive Web Starter Exercise

The css rules for the examples in this starter are in the attached css file file. Proceed with the prompts to see what’s possible.

Example #1: Simple Responsive Styling

This box is scripted to change background color when its width is 500px or smaller. Make a simple change to the media query screen size, and watch the breakpoint change in a browser preview by dragging the browser width smaller and wider during the preview. Make a another simple CSS change of your own choosing to the styling of the p tag on the same media query.

Example #2: Responsive Navigation

Example #3: Media queries with Grid

card 1
card 2
card 3
card 4
card 5

Example #3: Intrinsic Layout

The article below is set to display: grid with intrinsic changes so that it will automatically change to a single column layout (1fr) if a certain breakpoint is reached. Check it out in the browser now.

In the CSS for the article tag in the attached css file, change the numbers for the minmax values of the article tag. Leave auto-fit on so that it will automatically work. Try out making a media query for ".item" to also get it to bring in a background image when the browser width is up to 500px wide (sample image is in the starter folder). You'll have to type this one yourself in the corresponding media query rules.

item a
item b
item c
item d
item e
item f
item g