Making an image responsive but also making it smaller

Hello! I’m working on the first tribute project ( but I’m trying to figure out how to make my image smaller but also have it be responsive, any ideas? Here’s the codepen for the project:, still a work in progress; trying to meet all 10 guidelines before I pretty the page up :slight_smile:.

EDIT: Also having some issues getting the centering image test to pass :thinking:.

EDIT: All good, everything works now.

I’m not exactly sure this is what you want but you can keep it from getting too big by setting the max-width to something other than 100% (e.g. set it to a max pixel size).

P.S. To use the <figcaption> element you should really have it wrapped in a <figure> instead of a <div>.

1 Like

Sounds good, lowering the width itself but leaving the max-width looked to work :whew:. Additionally I did some hunting on stack overflow and managed to get my image to center. . Wound up being a couple layers to centering the image, not totally sure why simply adding “margin: 0 auto;” fixed it but it did :slight_smile:.

Because you also set display: block on the image. Block level elements can use auto side margins to center, inline elements cannot. An <img> is inline by default but you changed it to block.

1 Like

Oh so

display: block

made the image no longer inline; that’s why the centering worked. Makes sense. Thanks for clarifying.