Making an image responsive but also making it smaller

HTML-CSS
1

Hello! I’m working on the first tribute project (https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page) 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: https://codepen.io/misanthrope_murphy/pen/jOMNyML, 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.

2

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
3

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. https://stackoverflow.com/questions/7086281/html-css-image-wont-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:.

4

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
5

Oh so

display: block

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