futer8 futer8 - 3 months ago 8
HTML Question

Image caption (text) is shrinked significantly together with image

I have:

<div style="min-width: 1000px;">
<p>
Some text
</p>
<div class='div_img_left'>
<img src="images/sth.png" alt="missing image" style="max-width: 100%;">
<footer>My caption</footer>
</div>
</div>


.div_img_left {
max-width: 50%;
float: left;
margin-right: 30px;
margin-bottom: 2em;
text-align: center;
}


It is looking fine on my PC's screen. The problem begins when I open it on my mobile phone. As I suppose the issue here is that I don't have 1000px screen width on the phone. So everything shrinks. The problem is that "Some text" looks fine. Unfortunately "My caption" shrinks significantly more. How can I solve this?

I tried using other geometrical constraints but I failed. Specifically using % or min-height.

Answer

Use media queries and don't set things at such a large min-width if you want to have a responsive site. Use vw for width.

.div_img_left {
  max-width: 50vw;
  float: left;
  margin-right: 30px;
  margin-bottom: 2em;
  text-align: center;
  
}
figcaption {
  font-size: 1em;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 500px) {
  figcaption {
    font-size: 14px;
    line-height: 1
    min-width: 100%;
  }
  figure {
    min-width: 100vw;
  }
}
<div style="width: 100%;">
  <!--changed from min-width: 1000px-->
  <p>
    Some text
  </p>
  <figure class='div_img_left'>
    <img src="http://placehold.it/150x200/eea/e00?text=150x200" alt="missing image" style="max-width: 100%;">
    <figcaption>My caption</figcaption>
  </figure>
</div>