Using max-width it shrinks image

HTML-CSS
1

I just finished my tribute page and I was failing because I wasn’t using “max-width”. Originally I was only using this:

Div parent

#img-div {
  background: #fff;
  width: 400px;
  height: 100%;
  padding: 10px;
  margin-top: 8px;
}

Children

img#image {
width: 100%;
margin: 5px auto;

and I was getting stuck on that, so I found a thread on here which they said that we should do this instead:

img#image {
max-width: 100%;
display: block;
height: auto;
margin: 5px auto;

and indeed it worked. But there’s a problem with max-width that using it, the image shrinks (?)
I mean it worked. I passed the test but it’s not looking good at all. Before I ran the test I checked on the developer tools and on my phone, the page looks responsive, but the image turned into a flea

That’s my tribute page if you guys wanna to check it out: https://codepen.io/fernie-cpu/full/PoGKOGe

2

max-width will make the image as big as possible without exceeding the stated size.

if I delete the media query for the #img-div element, the image gets a bit bigger

and a bit down you have a rule for #image with width: 20%; which I imagine is keeping it small

try to not have multiple selectors for the same thing, it becomes messy

1 Like
3 
#image{
width: 20px;
}

You probably need to define your styles in one place to avoid confusion.

1 Like
4

omg I feel so stupid right now. thanks guys! how do we close this thread now? haha dear lord, the embarrassment