Learn CSS Flexbox by Building a Photo Gallery - Step 18

HTML-CSS
1

Tell us what’s happening:
Hey all! I’m a bit stuck on this step and hope one of you would be able to assist.
Below are the instructions given and I’m not seeing what I did wrong.

"Step 18

Your images need some space between them.

The gap CSS shorthand property sets the gaps, also knowns as gutters, between rows and columns. The gap property and its row-gap and column-gap sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.

Give your .gallery flex container a gap property with 16px as the value."

  **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;
}

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;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px; 
gap: 16px;
}

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

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

Link to the challenge:

2

That’s strange, your spelling is correct, but “gap” is still greyed out = editor doesn’t take the input. Have you tried reloading and redoing the exercise?

3

I have yeah. I’ve reloaded the page, restarted the exercise, as well as closed the tab and reopened the site :sweat_smile:

4

And you are still getting the greyed out input? “gap” should be in cyan.
You gave the right answer, you should pass the test, we need fCC staff members

5

Within the editor when doing the exercise it doesn’t give me any errors and looks like there’s nothing wrong with the code (the colours match with the rest of the correct code), but I’m not seeing anything different in the preview nor am I passing the test… how do I get in touch with a fCC staff member?

6

Forgot to say welcome to the forum!

There’s a support forum hope they can help you!

If not hit your computer, maybe that works, it worked with devices through most of the 20th century :joy:

7

Truly appreciate it, thank you!

I mean :eyes: like you mentioned, it worked before so might as well :joy:

8

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