Hello there. I’m currently working on a PR to solve this issue. So far, I’ve managed to add a new step, and now I just have to add the new seed code so that the previous step will work. The problem is I’m not exactly sure what to put in that section. Any suggestions? For context, here’s my PR.
1 Like
Hello there,
To clarify: the seed of a step is the previous step’s solution. So, the tests for the previous step need to pass with the code in the next step’s seed.
Specifically, it is odd to have step-7 start with:
<!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">
</body>
</html>
Then, step-8 start with:
<!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>
--fcc-editable-region--
<div class="gallery">
<img>
<img>
<img>
<img>
<img>
<img>
<img>
<img>
<img>
</div>
--fcc-editable-region--
</body>
</html>
Hope this helps
Kind of. I was told by one of the maintainers that Step 6(that’s the previous step I’m talking about) is failing because the seed code for Step 7 doesn’t include the changes the camper is expected to make. Pardon me, I’m new to contributing to the curriculum, so I need all the help I can get lol 
Hi @christinebelzie !
I looked at your PR and read Naomi’s suggestions for how to resolve this
Your new step 8 needs to be this for the seed code
# --seed--
## --seed-contents--
```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>
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
When it comes to testing your changes, you can test the project you are working on as mentioned in the docs here
In your case, in the root directory, you will need to run the following command
FCC_BLOCK="Learn CSS Flexbox by Building a Photo Gallery" pnpm run test:curriculum
when you see all of the tests pass, then you can push up your changes.
Also, whenever you are making changes to the steps, it helps to run the project locally and make sure the tests are passing.
I would suggest starting up the local server (pnmp run develop) and heading to the
http://localhost:8000/learn/2022/responsive-web-design/#learn-css-flexbox-by-building-a-photo-gallery
You will see all of the steps and can go through the altered steps like a camper would and ensure that the tests are working too.
Hope that helps!
Got to hop offline, but if you need anymore help just reply back to this thread and someone will get back to you 
2 Likes
Hi @jwilkins.oboe. I tried your suggestion and got a fail when I ran the test command you suggested
1 Like
What does the failing test say?
1 Like
The error message is saying it can’t find the shared object file. Maybe you can try installing the dependencies again?
I haven’t run into this error personally but when I googled it there were a few stackoverflow answers about some commands you can try.
Hope that helps
1 Like
Ok. How can I download those dependencies?
1 Like
ok, cool
I am back at my computer.
It looks like you are working with gitpod so everything should be installed and ready to go.
Are you able to start the server and client?
- Start the server: Run
pnpm run develop:serverin one terminal window from the root project directory (/workspace/freeCodeCamp) to start the server. - Start the client: In another terminal window, run
pnpm run develop -- -H '0.0.0.0'from the client directory (/workspace/freeCodeCamp/client) to start the client.
1 Like
I’ll also take a look at the changes you made to the PR to see why the tests are still failing.
1 Like
Ok, but I didn’t push my changes yet
1 Like
If you could push up your most recent changes, then I can see what is going on my end with the logs.
1 Like
Just pushed the changes
1 Like
Ok cool.
It usually takes a few minutes for the tests to run .
But I did spot two things
For step 7, it looks like you are missing a closing div here
<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">
</body>
For step 8, you have 2 editable regions here but there should only be one
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
.gallery {
border: 2px solid red;
width: 50%;
height: 50%;
}
img {
width: 100%;
height: 100%;
padding: .5em;
border: 1px solid green;
box-sizing: content-box;
}
--fcc-editable-region--
--fcc-editable-region--
The editable region should only be in the css section.
You will need to remove the one from the html section.
Otherwise, it looks like some of the tests are still running.
When they finish, I will take a look and see what the messages say
1 Like
So…step 8 should be like this:
<!DOCTYPE html>
# --seed--
## --seed-contents--
```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>
--fcc-editable-region--
```css
.gallery {
border: 2px solid red;
width: 50%;
height: 50%;
}
img {
width: 100%;
height: 100%;
padding: .5em;
border: 1px solid green;
box-sizing: content-box;
}
--fcc-editable-region--
1 Like
The seed and seed contents shouldn’t be inside the HTML section.
You should have this instead
–seed–
–seed-contents–
<!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>
.gallery {
border: 2px solid red;
width: 50%;
height: 50%;
}
img {
width: 100%;
height: 100%;
padding: .5em;
border: 1px solid green;
box-sizing: content-box;
}
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
1 Like
But also, I have pulled your branch and there might be an issue with the order.
So I am going to run it locally and see if steps 6-9 flow correctly.
That might be contributing to the failing tests too
1 Like
Here’s how I have it now:
# --seed--
## --seed-contents--
```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>
.gallery {
border: 2px solid red;
width: 50%;
height: 50%;
}
img {
width: 100%;
height: 100%;
padding: .5em;
border: 1px solid green;
box-sizing: content-box;
}
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
1 Like
yes, that is much better
But as I run your branch locally, I see this css at the top but it hasn’t been taught yet.
It looks like things are slightly out of order
.gallery {
border: 2px solid red;
width: 50%;
height: 50%;
}
img {
width: 100%;
height: 100%;
padding: .5em;
border: 1px solid green;
box-sizing: content-box;
}
You will need to remove those styles for the img and gallery class.
The only thing that should be there for the css is the box-sizing
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
It looks like step 9, should have the changed border-box value and then you go into the rest of steps about adding the styles for the images
Step 9 should be this:
Your images are too big. Create a .gallery img selector to target them. Give them all a width of 100% and a max-width of 350px so they shrink as needed but don’t get too big.
Also set the height property to 300px to keep your images a uniform size.
Then everything thing else should be in the correct order from there
1 Like