First project, last excercise won’t work. Really stuck

Hey everyone, iv done everything needed except for the second question in the layout section of the test. I have literally tried everything to get it to work, changed the display settings to block and changed the style list order and for some reason the last layout exercise will just not work. I’v google a lot but found myself looping onto pages that explain what i already ( think ) i understand and im applying it on to my coding and its just not working. Iv got the page to be responsive, just not exactly how the test wants me to, can anyone help me please ?

https://codepen.io/justaname947/pen/mYXqvE

You have some odd positioning and are using both classes and divs with the same values it seems.

 <div id="img-div" class="img-div">

scratch thisI would maybe start over on the css and avoid using ‘position: relative’ in this case./

Dang, Salim is right! I didn’t notice that (margin: auto) worked out of the box on that imgself class. I had tried it on some of your other divs and kept getting wild overlaps.

You did a great job, Every thing is good.

About centering elements, one of the methods is margin : auto just add it to your imgself class

1 Like

Thanks, this worked!
last question, how would i be able to readjust the figure caption to be under the image ?

you’ve also text-align : center you can add it to <figure> element

As you can see there are many methods to position elements like using
-margin
-text-align
-flex
-float

1 Like

i can see a lot of text in ur codepen, try using fluid typography, it will be responsive like a breeze

1 Like

just searched it up, looks a bit complicated, just a bit. After i finish my form layout project i will defiantly come back to the tribute site and add that feature + other things. Thanks for the suggestion again.