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 .
EDIT: Also having some issues getting the centering image test to pass .
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
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 .
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.
made the image no longer inline; that’s why the centering worked. Makes sense. Thanks for clarifying.