Learn CSS Flexbox by Building a Photo Gallery - Step 5

Tell us what’s happening:

Describe your issue in detail here.

Hello all fellow coders! So I am having some issues with this task. I am following the steps and whether my imgs look like the first one under the gallery div or the second one or the third i still cant get the code to pass. I have noticed sometimes instructions on these tasks or projects arent always clear and could probably use a rework and a rewrite. I have searched online and i have even used chatgpt this task for some reason wont pass. Im not sure what is being done wrong here.

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">
        <div class="gallery">
            <img src="" alt="Image 1">
            <img src="" alt="">
            <img src="" >
            <img src="image4.jpg" alt="Image 4">
            <img src="image5.jpg" alt="Image 5">
            <img src="image6.jpg" alt="Image 6">
            <img src="image7.jpg" alt="Image 7">
            <img src="image8.jpg" alt="Image 8">
            <img src="image9.jpg" alt="Image 9">
        </div>
        <h1>CSS Flexbox Photo Gallery</h1>
    </header>
</body>
</html>


<!-- User Editable Region -->

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 5

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

that would be incorrect

Welcome to the forum @DevPreneurpro

Please move the div and h1 elements below the closing header tag.

Don’t mind the @system generated messages. They act up every now and then.

Happy coding

So I did that and it still says its wrong…

Please post your updated code.

i try to and i get an error that says “An error occurred: Sorry, new users can only put one embedded media item in a post.”

Type three back ticks on a separate line
Paste your code
Then type three more back ticks on a separate line

Here is a single back tick `

@DevPreneurpro
You need to add just nine

<img>

elements, after creating.gallery div…

<!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"></header>
      <h1>CSS Flexbox Photo Gallery</h1>
        <div class="gallery">
            <img>
            <img>
            <img>
            <img>
            <img>
            <img>
            <img>
            <img>
            <img>
        
        </div>
        
   
</body>
</html>
it says this is wrong

Hi @DevPreneurpro

Move the closing header tag and place if after the h1 element.

Happy coding

thank you my friend
1 Like