Build a Tribute Page - images not lining up

Build a Tribute Page - images not lining up
0

#1

Tell us what’s happening:
Hello, I am after a little bit of help. I have built the majority of the tribute page however cannot seem to get the pictures to align properly.
Problem 1 - The pictures down the left dont seem to sit up completely against the content div.
Problem 2 - The 3rd picture on the right doesn’t seem to sit up against the rest of them.

All pictures were edited to be of the same size to fit the page. All were the same width and I made sure there was enough to all match hight wise.

Here is a link to my page https://codepen.io/Wiggyswig/pen/GBoJBm

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

Thank you so much in advance
Steve


#2

Please go head and paste your code


#3

I did, I added a link to my codepen code.

Here it is again though https://codepen.io/Wiggyswig/pen/GBoJBm


#4

Your img links are broken. you get an “Failed to load resource: the server responded with a status of 401 (Unauthorized)” message in the console.

Log in to cloudinary and get the correct links to your images.


#5

Thanks fixed the links but still seem to have a major issue with the images. Just checked it from my phone and its even worse. Thought I had it vaguely responsive but clearly not. Have I missed something?


#6

Brave little girl indeed! (The parents probably deserve a tribute page too)

From a story-telling standpoint I really like the pictures. For passing the first challenge though that many pics in that grid may be a bit ambitious.


#7

She is my daughter, she is my motivation for wanting to achieve this and become a developer. It is what I have always wanted to do but never had the bottle to go for. I want to create a better life for her and teach her that dreams can come true no matter what your setbacks.

That aside what would your recomendations be then to be able to fit the images in a grid responsively? I managed to overcome one hurdle and get them to fit down the right hand side, however they are awful on the left and overlap the text… this makes no sense to me though as all the grid containers are set with the same CSS rules. Am I best off not using a grid style then?


#8

That is because you specified “.img-div” for the class attribute on all but the first img element. When using the class attribute, you do not put the leading dot in front of it. That is only for defining the class in CSS. Not that it causing a problem per say, but img elements do not have a closing tag like </img> so you can delete all of those.

I believe once you resolve the problem above, it will fix whatever you were experiencing before.


#9

Thank you so much, after a little tinkering its now resolved. Not sure why I specified .img-div. Goes to show that a little lapse in concentration makes a big difference though. Thanks for all replies.