Image caption (text) is shrinked significantly together with image [duplicate] - html

Question

This question already has an answer here:
Responsive width is too small on phone, but okay on desktop browser
(1 answer)
Closed 6 years ago.
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 1

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>