Tribute Page: responsive resize image

Hello,

I have gone through the HTML and CSS portion a few times, and live on W3schools.com. However, I am unable to get it through my head why I can’t get the image to fit within the parent container. My suspicion is I don’t have the parent container to have values. None the less, I am uncertain. A second pair of eyes may help.

You may see what I have going on here.

Thank you in advance.

#image {
  border-radius: 50%;
  max-width: 100%;
  width: 12%;
  height: auto;
}

If you’re trying to get the image to stay the same size, then you’re telling the browser “set this image to 12% of it’s parent, but make sure you don’t go over 100% of it’s parent width”. So it will always re-size to 12% of it’s parent.

1 Like

Thank you all for the quick feedback! This is amazing!

To clear up some questions, comments, and feedback:
@bgq007

One of the requirements of the project is to have id=“main”. Since I just simply did divs and not the grid formatting, I tossed it on the main container that holds everything. It made sense to me?


@JM-Mendez

I think you hit what I am getting at. Is there a way to simply say, 'stay THIS size and don’t go over 100% of parent size?

Current code gives me the following error when I runt the tests: 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Hope this clears some things up! Thanks again for your speedy and always great responses!

Trying to play around with the width/height items. However, I can’t get the Code Camp Tests to clear me for that item.

I don’t understand how, but I was able to get it to work. Wow!

Side note: This is my first time on these forums. It is intimidating to post here, but I have had a great experience. Thank you all again!

Yes if you set the width to a static value, like px. You set it to a dynamic value %, and so it will always calculate the width of the parent, and then set the width of the child. That’s what makes it responsive. So like this

#image {
  max-width: 100%;
  width: 50px;
}

1 Like

@aBrethauer I am having same issue with my tribute page. Even though my image is responsive. I have tried out all the alternate from this post but couldn’t fix.

This is my pen : https://codepen.io/IamMonikaPatel/pen/aGYQoQ

Can some one please help to point out why this is happening.

Much appreciate :slight_smile:

Cheers,
Monika.

You are using bootstrap which sets it’s own styles. In this instance, col-lg-5 sets your image width to 41% of the parent

37

and here you’re setting the max width to 100% of it’s parent, which is set to 41% of it’s parent.

39

The width property isn’t taken into account because the image at 100% width still isn’t over 500px. You need to override the bootstrap css.

1 Like

I haven’t planned to use internal style except bootstrap files. I don’t even get what the error message is actually. how should i fixed ?

This test is looking for the “display” prop to be “block”, but you somehow have set it to ‘inline-block’. This means that your css is not to spec. Look to see what the display prop on the img element is

2 Likes

Wow… You are a star :star2:

I was trying to understand whats the error msg really mean. I didn’t expect that the answer was that easy.
Thanks you for your hint and of course quick reply.

Much appreciate :smiley:

Cheers,
Monika.

1 Like

Anytime! Whenever you see an assertion error, it will always start with what it’s checking, and then show you what it received. All the stuff after that is a stack trace. You don’t need it now, but it’s useful while tracking down a bug.

Happy coding!

Thanks,

Happy coding to you too :slight_smile:

Hi everyone! I am new on here and am having the same problem! I am not sure where I am going wrong!
here is my code: https://codepen.io/freeCodeCamp/pen/MJjpwO

Any help would be much appreciated!

Thank you!

I don’t see any active HTML/CSS/JS beyond the test script. Did you save your code?

I actually got it all figured out! I can’t access my codepen right now for some reason…I meant to resend the correct link.

Thanks!

Hello all, I can’t seem to get pass the following error:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

I’m working on the Tribute Page Project, and my CodePen link is https://codepen.io/algala-droid/full/ExVwazK.

Any help would be greatly appreciated, thank you-