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

HTML-CSS
1


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?

2

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.

3

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.

Screenshot_2019-03-12-19-25-31
Screenshot_2019-03-12-19-25-31720×1280 959 KB

4

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.

5

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

6

You can try this.

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

#img-div{
/*   margin: 0px;
  margin-top:20px; */
  width:100%;
  /* max-width on the container */
  max-width: 614px;
  /* Center the container and give wanted margin */
  margin: 20px auto 0 auto;
  border:5px beige;
  background:beige;
}

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

img{
/*   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
7

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

8

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.