Learn CSS Flexbox by Building a Photo Gallery - Step 20

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
“your .gallery::after selector should have an empty string “” set for the content property”
I have no clue what I’m doing wrong

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

.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
::after""
width:350px;

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14909.100.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

that is not css, you will need a class or id before your ::after and then the opening and closing brackets ({}) and then content set to “” (for empty string)

3

You can use ::after (and ::before) in the same way you add :hover to an element.
As for the part asking to set content to an empty string. You do that the same way you add every other css style.
I’m sure you can complete the challenge once you understand these two points. :+1:

1 Like
4

I got it eventually, lol

1 Like
5

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