Hello, I cant seem to find a way to align the images in a row. How would I do this?
Also if you see anything else that needs changing in the code for now please let me know. I am not even close to finishing the project yet.
Code: https://codepen.io/drdre5/pen/OJyEKKY
Thanks you so much,
Andrej
ilenia
May 13, 2020, 1:29pm
#2
is this the freecodecamp project?
you need to have the test script included. And you are failing many of the user stories:
paste this: <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
as last thing in the HTML box
select from the drop down menu of the test script the name of the project, press “Run Tests”
if you click on the number of passing tests you see which one pass and which one fail.
below each failed test there is the reason why, often it has useful information
to pass two more tests with no effort: you have used id #Welcome-Section
when it should be all lower case, id="welcome-section"
Im not even close to finishing the project, I just had a question on how to align the images in a row
thanks,
Andrej
ilenia
May 13, 2020, 1:35pm
#5
still better to have the test suite included from now, as you need to have it included in the project you submit.
you can try with css-grid, putting each project-tile in a grid area.
you could also put each image and its own title in a div and use flex-box
1 Like
Ok I am still having a lot of trouble. I was able to use CSS grid and create 4 columns but now the text and the images are separated
Thanks
ilenia
May 13, 2020, 4:20pm
#8
you need to put the image and the title inside a single element, like a div
or figure
so that they stay together in the grid cells
1 Like
Yea the image and text are staying together but the text is on the left hand side of the images and not the top.
https://codepen.io/drdre5/pen/OJyEKKY
ilenia
May 13, 2020, 4:42pm
#11
As I said before, to keep them together you need to put each title+image couple in its own div or figure element:
1 Like
Ok thank you, why does this work?
Thanks,
Andrej
ilenia
May 13, 2020, 5:17pm
#14
if you want them to stay together you have to link them in some way: here we are putting them inside the same element to join them so that they stay together inside the grid.
1 Like