Learn CSS Flexbox by Building a Photo Gallery - Step 20

HTML-CSS
1

Create a media query for screens smaller than 800px in width. In that media query, create a #gallery img rule and set the width property to 50% . This will convert your gallery to a two-column layout. - I don’t remember learning about how to add a media query I have tried every possible solution I can think of so id appreciate any help.

Your new @media query should have a max-width of 800px like this: @media (max-width: 800px).

  **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: 50%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}

@media (max-width: 800px) #gallery image{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 Edg/103.0.1264.62

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

Link to the challenge:

2

The media query itself also uses opening and closing curly braces.

@media (condition) { 
  /* put CSS in here */
}

Also, your image selector is slightly off:

“create a #gallery img rule”

3

@media {(max-width: 800px)} this is what i have, what is the problem??

4

image
image1366×768 262 KB

you mean like this? it’s still not as its still not working

1 Like
5

Not quite. Look again at my example:

@media (condition) { 
  /* put CSS in here */
}

The “condition” is when the media query should take effect, which in your case is up to a max width of 800px. And then inside the curly braces you put the actual CSS you want to use for the media query.

1 Like
6

@media (max-width: 800px) like this? i still get add an @media query error?

7

like you need to create a
#galley img {
width:50%
}
inside
Screenshot_2

8

Thank you for your explanation. I don’t think media queries are covered in the curriculum up to this point.

9

I believe you are correct. Actually, I think they are in the process of removing the media query steps from all of the courses.

10

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