Tribute page help with the responsive image CSS in user story 8?

Hey everyone,

First post here, so please let me know if I need to change/edit anything. I’ve been working on my tribute page and am having problems getting user story #8 to pass. Here is the Pen:

I’ve tried a couple of different approaches using both the id #image and the img. tag and can’t quite figure out why it’s not passing. I’ve tried the margin-left and margin-right trick tried setting max-width to 100% as well as doing width: 100%; max-width:1920px; and nothing seems to be getting the test to pass. Here is the css I have right now:

img {
  max-width: 1920px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right:auto;
}
 
  #img-div {
  background: #DCDCDC;
  padding: 15px;
  margin: 0;
}
  #img-caption {
  margin: 30px 0 5px 0;
}

I’m sure I’m missing something simple but I’m not sure what it is.

Any help or feedback would be great.

Best,

Dahltron

Hello @dahltron and welcome to the forum.

Your image css is nested inside a media-query with a max-width property, and nothing else is defined for other viewport sizes,

You can see this yourself by changing the browser window size, you will see that the image is nicely center only for screen < 500px, for all the others the image is in full resolution and exceeding the page size.

Hope this helps :+1:

p.s. you forgot a closing } at the end of your CSS media query statement

@Marmiz Thank you so much. I removed the media query entirely and the tests passed perfectly. For the future where should a media query be placed to avoid this?

In general when you want to design websites you want to follow the “mobile-first” principle,
meaning that you want to start design for mobile views first, then build up to wider screen sizes.

That where media queries comes handy, if you want to apply some stile only for specific screen resolution.

Happy coding :sparkle: