Learn CSS Flexbox by Building a Photo Gallery - Step 5

HTML-CSS
1

I’ve read so much on the forum, but I can’t find what it is what I’m doing wrong. Can someone give me a hint?

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!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>  
    <div class="gallery"> 
    <img>
    <img>
    <img>
    <img>
    <img>
    <img>
    <img>
    <img>
    <img>
    </div>
</header>
</body>
</html>

<!-- User Editable Region -->


/* file: styles.css */

Your browser information:

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

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

Link to the challenge:

2

Your image elements are not self closing add a closing </img> tag after each image element.
Ex:

<img></img>

Hope this helps.

3

Hi, I’ve tried that and it doesn’t work… But thank you for the suggestion

4

Hello!

Are they all to be in the header? Or are they to be in the gallery?

I think this is the issue

And img are self closing elements

5

Soory. @anon42932716 is correct!
Your images should not be part of your header. They should come after your closing </header> tag.

6

Screenshot 2023-10-09 205140
Screenshot 2023-10-09 205140857×820 50.5 KB

Thank you for answering me guys, I tried moving the </header but it’s still not right :smiling_face_with_tear:

8

The h1 element still needs to be in the header.

Also, it is better to paste your code in here rather than give us a pic. Please use the following method to paste your code in here so we can see your actual HTML.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
10

Wow, thanks, that was it… Dumb mistake :slight_smile: Should I delete the post?

11

No mistake is dumb :wink:. I assure you that there are many others that make the same kind of mistakes (kinda like what I did before…). Don’t delete your post because it will help other’s who are facing the same issue pass the step as well.
Well done on completing your code and cheers :clap:.

2 Likes
12

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