Tribute page layout test 1&2 break each other

Hi! I’m nearly finished with the tribute page project, but can’t pass user stories 8 and 9 (layout tests 1 and 2).
As it sits, the image is both centered and responsive, but it’s failing the responsive test. The error message states that you’re expected to include “display: block;” When added to “#image”, it fixes the error code, but sends my image back to the left and causes the other error to appear. Could it have something to do with using “text-align: center;” on “#img-div” to center the image? The rule said “Relative to its container”. Thanks!

You will definitely have to set the display to block on the image as that is part of the requirements to pass the tests. So this leaves you with centering the image. CSS Tricks has a great guide on centering everything, include block level elements.

1 Like

So, I just need to find an alt way to center. Do you think I’m on the right track targeting the div to center, or should I def code it to the image?

There are several ways to do this but one of the most straightforward and easiest is the method used in the page I linked to above. I recommend you read that and see if you can make it work.

1 Like

Thank you for taking the time to point me in the right direction! It is most appreciated! I’ll delve into it tomorrow. Have a great evening!

Got it! Margin: 0 auto; on the img rather than div did the trick. Thanks again for the help!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.