A list of hints for the challenges in the Media Queries Intro lesson..
Last updated - July 23, 2024
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!