Challenge Hints: Media Queries Intro

A list of hints for the challenges in the Media Queries Intro lesson.

Last updated - June 30, 2023

 

Checkpoint

Did you add "viewport" to the <meta> tag?

Make sure to use "@media" for the media query

Disappearing Box

Make sure your opacity is set to a digit.

Make sure you have a media query in your CSS.

Make sure you set the media query opacity to 0 so the box disappears!

Color Changing Circle

Make sure you use border-radius to style your div into a circle

Set a background-color for the circle in CSS.

Make sure you use the correct syntax for a media query.

Use background-color in the media query to update the color.

Changing Animals

body {  background-image }

Try something like : @media { body {....

@media ( max-width: )

Hidden Message

 <h1>   </h1>

Is your max-width set to 700px? Did you set the h1 opacity to zero?

<p>   </p>

Is your min-width set to 700px? Did you set the <p> tag opacity to zero in the CSS?

Circle to Square

Use border-radius in your CSS to make a circle

Use background-color to style the circle

Make sure you have 5 distinct media queries in your CSS

Make sure border-radius is in all 5 of your media queries

Make sure background-color is in all 5 of your media queries

For more help with CSS, check out our CSS Reference Guide!