Trouble with Responsive Image Step of Tribute Page

Code Feedback
1

Hello, fellow campers! I’ve been working on the tribute website project and am feeling mostly finished, with the exception of having trouble getting the responsive image step to pass the tests. The message within the test states that my images need to have the display property set to block. Which I have done, so I’m just confused at this point. I have tried a few different methods for making the image responsive, but the one I have currently set in my pen is what I was pretty certain would work. Here is a link to my pen: https://codepen.io/SpaceCatInD/pen/KBObbm 3
Any advice would be greatly appreciated.
It’s not the most attractive page ever either, so any other input on layout, design, etc is welcome.
Thanks in advance!

2

here’s the only section in your css that deals with the img

@media screen and (min-width: 320px) {
  img {
    max-width: 100%;
  }
}

as you can see, the display: block is not defined there.

1 Like
3

Ok. So it took me a minute to understand what you meant. I had added some customization to the div containing the image, which in my mind meant that the image was just taken care of as far as setting the display property etc. Now that my oversight has been pointed out, I’m feeling pretty foolish. All that frustration for nothing. :sweat_smile: Thanks for your help!

4

it’s a fair assumption but now you know the test suites require exactness…

1 Like