Tribute page detail questions

Codepen: michanne303/pen/VNbYzd

Hi there,

I can get this to pass however I want to keep the border around the image. Is there any way to center the image in the container without removing the border and shadows?

Also, the caption is off to the left. I played around with different properties but it got tricky when I resized the window. Is there a simpler way?

Thank you so much!

I see you have set different paddings in the #img-div img selector. Why not make them same?

This is my favorite way to center everything:

#img-div {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Also parent of figcaption must be figure not div

2 Likes

Thank you. The padding is different because it mimics the aspect ratio of a polaroid image. If i make it equal it passes. I was hoping to keep the aspect ratio.
I was able to center the caption but I think it looks nicer under the image aligned left. Is there a way to do that and have it be responsive?

#img-div {
  align-items: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  max-width: 700px;
  width: 100%;
}

Unfortunately that doesn’t center the image and it fails the responsive test.

I am thinking the bottom padding is causing it to fail the test. I’m calling it passed and i have a copy on GitHub pages.

Hi @michanne303, <quote> is not a valid HTML tag, did you mean to use <q>?

yes, good catch. actually maybe i will play with block quote.

1 Like

Don’t you just have to add max-width: 100%; to the image (#img-div img) to make the test pass?

Not sure if this does what you want?

#img-div {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 700px;
  margin: auto;
}

#img-div img {
  display: block;
  margin: auto;
  border: solid #000;
  border-width: 1px 1px;
  padding: 15px 15px 60px 15px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) inset, 5px 5px 8px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

#img-caption {
  color: rgba(0, 0, 0, 0.6);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: auto;
}

@media (max-width: 790px) {
  #img-div {
    margin: 0 20px;
  }
}

That was it! I didn’t need to modify the media query. It was just those three lines. Thank you! I was feeling down trodden without a proper polaroid!