Tribute Page not passing Test Suite - Help

HTML-CSS
1

My Tribute Page is not passing the test suite for two items:

img not resizing responsively

img not centered

I have three images, and two of them do resize and two of them are centered. Can you please let me know why it is not passing?

Tribute Page

2

under .image-1
try max width of 350 to 400 and it will pass your ninth test. I tested it. (375ish)

3

sorry
max-width: 375;

4

That worked but I had to use 400px. When I used 375px it canceled out the padding somehow and the words were right up against the image.

Thanks, I don’t understand why it worked though.

Edit: I did not run the test after I changed it to 400px. It does not pass if I enter this value. I have to enter 375px like you said.

I really would like to understand why because at 375 the words are jammed against the photo and doesn’t look good.

So confusing…

5

So i corrected it by using the error statement(still new at this) but I did look it up here

https://www.w3schools.com/css/css_max-width.asp

I hope this helps.

7

here is a trick to pass all tests and mantain your layout.
take a look at container2 in html and at the beggining of css code.

8

It doesn’t matter with the size of figure element, the error says img is not centered and not relative to parent,

  1. You have to convert the img to block element and give it a max-width of 100%
  2. You shouldn’t float left the figure element, it makes the element to move out of the container and floats left, rather float the div element that holds the figure and give that div a padding-right, remove the padding-right from figure element
9

Very Interesting, thank you.

10

  1. I want the top photo to resize so the whole photo is in screen and centered with preferably no white on the left/right margins and the caption left aligned below it. The text should move to a single centered column below this with the text left aligned and a visually appealing amount of white on left/right margins.

  2. Regarding media queries what you mention makes sense. I was adding them next to what they changed so I could keep better track. But I only added the one size because it was so much. Some videos that I’ve watched added 3 different sets (large, medium and small screens). Thanks for bringing this up! I’ll go back and clean it up. Do you happen to know the three standard sizes you would use for large, medium and small screens? Or where I should look for this?