Learn CSS Flexbox by Building a Photo Gallery - Step 20

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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 {
width: 50%;
}
@media (max-width: 800px)/*[THIS WHERE MY ISSUE IS HOW DO I ADD THE @MEDIA QUERY TO THE CODE?]*/


  **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

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

Link to the challenge:

2

The media query itself uses curly braces and then the CSS goes inside the curly braces. The condition is when you want the media query to take effect, such as up to a max width of 800px.

@media (condition) {
  /* Your CSS goes in here */
}
3

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