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.
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.
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!
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
@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 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
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.
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.