Tribute Page: Stuck on Responsive Image

HTML-CSS
1

Hello!

I’m working on the first Responsive Web Design Challenge (the Tribute Page), and have gotten stuck here:

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

I’ve tried going back through the content to review responsive images, and googling, but I’m just not figuring it out. Can anyone help spot the error?

Project can be viewed here: https://codepen.io/biscutts/pen/yLgELWO

Thanks so much for any help!

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

1 Like
2

Hi there, For that you need to use media query

@media (max-width: 460px) {
  #img {
    Change the height and width here, 
  }
1 Like
3

It’s better doing this

@media (max-width: 460px) {
  #img {
    <!-- Change the height and width below -->

    <!-- Change the height and width above -->
  }
4

Media query syntax

@media screen and (max-width: /*Numbers goes here*/) {
  #img {/*Code goes here*/}
}
5

Hi all, thanks so much for the quick responses!

I’ve gone back to look at both the Create a Media Query and Make an Image Responsive challenges, but I’m still not succeeding in the codepen test suite.

Am I combining the two portions of code incorrectly, is there something else I’m missing?

Thanks so much! Link to project at top of thread.

6

this is your current code:

@media (max-width: 460px) {
  #img {
    max-width: 100%;
    height: auto;
  }
}

But you need to limit the width and height. it is 100% now like before. Basically, you should say at this screen size decrease the width and height of this image.

Maybe this sample help you:

7

2 posts were split to a new topic: Please help me with the tribute page

8

Hi @biscutts !

Welcome to the forum!

I personally don’t think you need media queries to solve this challenge.
Especially since there is very little content.

If you read the full error messages it will help you solve the challenge.

For example,
Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

You need to use the max-width property for all sizes which is why the media query isn’t working.

As for the centered image this should help
https://www.w3schools.com/howto/howto_css_image_center.asp

9

Thanks for the suggestion! After much more fiddling I got it to work without the media query.

To be honest I still don’t understand why it’s working, but hopefully that will become clear with additional practice haha.

1 Like
10

I am glad you figured it out. :grinning:

This might help

1 Like
11

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