Learn CSS Flexbox by Building a Photo Gallery - Step 21

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

Your code so far

hello. I’ve tried multiple ways of describing the images but they all wouldn’t work.
What must happen here?

     <img alt="white cat sleeping on the floor" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img alt="uglyc cat lying upside the floor" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img alt="dark cat starring at a mouse" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img alt="cat covered sleeping like a human" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img alt="white cat with blue eyes" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img ="two ugly cats hanging and bored" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img alt="gray cat afraid of a dog" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img alt="cat surprised like someone who found money" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img alt="two small cats chilling after eating" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <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>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img alt="white cat sleeping on the floor" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img alt="uglyc cat lying upside the floor" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img alt="dark cat starring at a mouse" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img alt="cat covered sleeping like a human" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img alt="white cat with blue eyes" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img ="two ugly cats hanging and bored" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img alt="gray cat afraid of a dog" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img alt="cat surprised like someone who found money" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img alt="two small cats chilling after eating" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}

Your browser information:

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

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

Link to the challenge:

Not sure if this will solve your issue, but I do see one problem in particular. Take a look at your “img” elements. One of them is missing an attribute, and instead just has an “=” sign. You will want to put the required attribute before the “=” sign.

which one is that? I can’t see that.

Nested in your div element with the class gallery. Look at your img elements you have there. One of those elements is missing the “alt” attribute.

This is the missing alt

oh thank you so much!

1 Like