True or False: Media queries allow you to write CSS that is only applied at certain window sizes.
Take a look at the following CSS:
What is the best description of what this media query says?
The practice of starting with CSS for the smallest possible size and adding complexity with media queries for larger viewports is called what?
Write a media query that sets the background color of the body to be #ffe08a
on screens wider than 600px
.
Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.
Write the media queries needed to set the type size of h1
elements to be:
2.5rem
on screens wider than 400px
3rem
on screens wider than 600px
.Be sure to write it in that order.
Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.
Now we have a paragraph as well as a heading. Let's make it responsive as well.
Write the CSS to set the type size of the paragraph to be 1.5rem
on screens wider than 600px
.
Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.
Change the color of all paragraphs to be #448568
when the viewport is wider than 400px
. It should stay red at sizes smaller than that, and it should use the same typefaces at all sizes.
Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.