Learn CSS Flexbox by Building a Photo Gallery - Step 11

Tell us what’s happening:
I am having a issue with the code thus far, I have done it .gallery, img
Should i do them separately. I think the issue has to do with my layout. I am not sure if i need to do them as separate, or if I am missing an element.

Your code so far

<!-- 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 */
* {
  box-sizing: border-box;
}


/* User Editable Region */

.gallery img{width: 100% 350px; height: 300px;}

/* User Editable Region */

Your browser information:

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

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

Link to the challenge:

Hello @surelyalice !

Great attempt!

Example Only:

width property: 800px;
max w property: 850px;
}

The max-width: 350 px; needs to be separate from the width in th code.

To let you know, I had the same problem at first, and even now sometimes.

Keep up the great progress!

2 Likes

You're like a coding

Super Hero

thank you so much!

2 Likes

Thank you for your kind words, @surelyalice! Happy to help!

Keep up the great progress you are making with your coding journey!

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