Personal portfolio andrej

1

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

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"

4

Im not even close to finishing the project, I just had a question on how to align the images in a row

thanks,

Andrej

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
7

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

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
10

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

11

As I said before, to keep them together you need to put each title+image couple in its own div or figure element:

image
image1032×585 73.1 KB

1 Like
13

Ok thank you, why does this work?

Thanks,
Andrej

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