Learn CSS Flexbox by Building a Photo Gallery - Step 20

HTML-CSS
1

CANT DO THIS STEP: 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.

  **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;
}
@gallery img{
max-width: 800px;
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.0.0 Safari/537.36

2

I believe this step is being reworked to remove the media query. But for now, the format you should use is:

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

Where the condition is when you want the query to take effect. For more information, see this FCC article.

Even if you don’t get this right on the first try, if you start it correctly with @media then the hint will pretty much tell you exactly what to use.

3

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