Learn CSS Flexbox by Building a Photo Gallery - Step 20

HTML-CSS
1

Tell us what’s happening:
Good day, not sure which steps to take to add the #gallery img to the media query
. Any assistance is greatly appreciated.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Photo Gallery</title>
   <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
   <div class="header">
     <h1>CSS FLEXBOX PHOTO GALLERY</h1>
   </div>
   <div id="gallery">
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
     <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
   </div>
 </body>
</html>

/* file: styles.css */
* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: Arial;
 background: #EBE7E7;
}

.header {
 text-align: center;
 padding: 32px;
 background: #E0DDDD;
}

#gallery {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 padding: 0 4px;
}

#gallery img {
 width: 25%;
 height: 300px;
 object-fit: cover;
 margin-top: 8px;
 padding: 0 4px;
 border-radius: 10px;
}
@media (max-width: 800px){
 #gallery img:
 width: 50%;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36

Challenge: Learn CSS Flexbox by Building a Photo Gallery - Step 20

Link to the challenge:

2

Your media query selector looks good, so don’t change that.

If you were to create the #gallery img rule set outside of the media query, how would you do that? That’s exactly the same thing you want to do inside the media query too. Just pretend like it is a regular old CSS rule set. It just happens to be inside a media query.

3

Thanks for the feedback. That cleared it up, I was able to pass it to move forward.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.