First project, tribute page. Img help for user story 8 and 9

I really just don’t understand, think I’ll just have to do the entire first bit of walk-throughs again. I’ve googled and googled images of code to try and understand what to do/ what I’m doing wrong. I’ve gotten to the point of random copy and paste from other’s solutions. I don’t know, I just don’t know. Seeing other people’s solutions after figuring it out or getting help and going “Oh! Now I see it!” is making it even more frustrating because I just don’t see it at all.

https://codepen.io/dameandude/pen/rNMpPxy

OK, with regards to the first test that is failing, you made a very understandable mistake, you put:

<style>
#image {display:block;
       max-width: 100%;
       height:auto;}

</style>

In the CSS pane of your pen. You don’t need those style tags - those would be if you were embedding it in HTML. But this is codepen, a kind of magical world where you don’t have to do that. If you remove that, the test passes.

1 Like

With regards to centering, there are a few different ways but one easy way is to control the margin. For example, if I put:

  margin: 0 auto;

When there are two values given, the first one controls the vertical, the second the horizontal. So, we are telling to give no vertical margin and for the horizontal, to do “auto”, automatically calculate what it would need to be to center it.

When I make this change and the previous one, it passes.

1 Like
img-div{
 text-align: center;
}
#image {
 display:block;
 max-width: 100%;
 height:auto;
 margin:0 auto;
}

This passed all the tests for me, try the same, and by the way, you need not use the <style> and </style> tags over here because in this case the html and css sections are seperate, you have to use the style tag if you want to ignore the CSS Section once and for all and include the css in your html section.

1 Like

Life. Saver. I tried so much, and was just…defeated! Haha over something so dumb! Thank you thank you!