Learn CSS Flexbox by Building a Photo Gallery - Step 7

HTML-CSS
1

** You should have an img selector:**
why is this code not working.

**Y.gallery { width: 50%;
border: 5px solid red;
}

.img{ width: 100%; padding: 5px; border: 5px solid blue}**

<!-- 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 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">
    </div>
  </body>
</html>

/* file: styles.css */

/* User Editable Region */

.gallery { width: 50%; 
border: 5px solid red; 
}

.img{ width: 100%; padding: 5px; border: 5px solid blue}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

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

Link to the challenge:

2

You did it almost right but the main thing is img is not a class attribute :blush:

2 Likes
3

Hi, thanks, I hate this, it is always a small dot or something like this

2 Likes
4

It’s okay you will learn this by practice :blush:

3 Likes
5

Hi @Luna2!
Small mistakes are the hardest ones to find. But we all make them, no matter how long people have been coding, it happens.

You are doing great with your progress.

Keep up the momentum! :slight_smile:

3 Likes
6

Thanks a lot, I appreciate the encouragement

1 Like
7

This worked for me 09/26/2023:
Mod edit: removed solution

8

@GG_Ango_81

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

2 Likes