How do I make my caption the same size as my image?

Right now the caption is sometimes wider, sometimes narrower than the image depending on the size of the screen. I want it to remain exactly the same width as the image. How do I do that?
Also, what do you think about my font? I want to make it a bit similar to a medieval manuscript and that’s why I choose this font, but I wonder how hard it is to read it? Do you have any alternative font suggestion?

What you could try is in the css declaration for #img-caption, add the properties “width: 614px;” and “margin: 0 auto;”. The image itself is exactly 614px wide, which is why I suggested that. Let me know if it helps.

Thank you very much. It works when the screen is bigger than the image, but when it’s smaller the caption doesn’t shrink. So I tried max-width instead of width, now the caption shrinks, but not at the same rate as the image. So the caption becomes narrower than the image. Attached a screen shot from my phone to show the problem.

It seems that at around 770px of width, the image starts shrinking, so the caption starts getting relatively bigger. Maybe what you could try is adding a media query with max-width: 800px as a break point. Then make sure the caption and the image have the same width properties set as well as border properties.

Thank you, I can only try it tomorrow because I’m not near my laptop, but I will let you know if it worked.

You can try this.

* {
  /* add at top of the CSS */
  box-sizing: border-box;

/*   margin: 0px;
  margin-top:20px; */
  /* max-width on the container */
  max-width: 614px;
  /* Center the container and give wanted margin */
  margin: 20px auto 0 auto;
  border:5px beige;

  /* maybe try justify */
  text-align: center;
  /* Padding equal to img border */
  padding: 0 15px;
/*   max-width: 614px; */
/*   margin: 0 auto; */

/*   max-width: 80%;  */
  /* 100% might be required by the test as well
   * you can lower the max-width on the #img-div
   * container to control the img size
  max-width: 100%;
  display: block; 
  height: auto;
  margin: auto;
  border-top: 15px solid white;
  border-left: 15px solid white;
  border-right: 15px solid white;
1 Like

Thank you, it worked! Just one question, how did you find out the width of the picture?

Right click on the tribute page and choose “inspect” and hover over the img element in the dev tools. It will show you the dimensions of the picture in a tool tip.