Tribute Page: image is not responsive even passing tests

#1

This is my tribute page: https://codepen.io/nethleen/full/VJJXzN

I am passing all tests but the image doesn’t change size anymore when changing the window size. Last time I checked my tribute page it was working correctly. I have used

img {
  max-width: 150px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

But I have anyway the image doing this:
image

#2

How would you make the image be the whole width of the container? Do not use px.
image

#3

if you mean max-width: 100% it doesn’t get smaller anyway when I make the page smaller
I think there is something weird going on with the max-width thing

(width: 100% does the same thing)

#4

You need a relative max-width (%) and to set a width to img’s parent ( #img-div ).

img {
max-width:100%;
}

#img-div {
width:100%;
}

This should work.

#5

It should be fine if you just add width: 100%; to the image (don’t remove the max-width but have both).

1 Like
#6

Yeah, that works, too. The max-width: 150px; makes sure the image will not expand more than 150px on larger displays.

If you are finding that on Codepen it still displays strangely, you may need to add, remove and add the width: 100%; line. Sometimes, in my browser, Codepen doesn’t automatically refresh after changes.

#7

Thanks, bud. This worked for me.

#8