Help Center image with parent/Tribute Page https://codepen.io/ldbsda85/pen/abvvRwE

Code Feedback
1

#img-div {
max-width: 300px;
padding: 10px;
position: center;
}

#image {
max-width: 300px;
padding: 10px;
box-shadow: 10px 0px 20px;
display: block;

}
#img-caption {
text-align: center;
color: #c2760b;
display: center;
}

<figure id="img-div">
  <img id="image" src="......" alt="Respiratory care practitioner managing ICU patient and ventilator" style="width:100%">
  <figcaption id="img-caption">ICU Respiratory Therapist working with patient</figcaption>
</figure>
2

Try setting

#image {
max-width: 100%;
height: auto;
}

I just finished mine and I think that worked for me

3

Thanks for you looksie! It didn’t work. Plus the image is huge. Maybe thats the prob? idk. will look for another I suppose.

4

Do not exist this properties: display: center and position: center
If you want to center a block:

  • its parent does not have display: flex --> set margin left and right is auto
  • its parent is display: flex --> do not set margin auto for it, but set parent has justify-content: center;
5

I tried what I could understand. Bit tired. Will look at it again tomorrow. Thanks!

6

Make sure your diplay is set to block.

diplay: block;

1 Like