I just thought I’d try and help out seeing as I think I have a solution to your problem even though I am very new to this myself!
What I would do (not necessarily the right thing to do) is take out your inline styling in HTML and then just use CSS to target and define a font-size for your caption? Hopefully I’m not getting the wrong end of the stick here!
Also, good job on the page! Let me know if you manage to fix what you wanted!
thank you! I tried your code and my old one, and the thing is when I use “font-size:1.2vw;”, then the text fits the size of the image Full Page mode. But if I use “font-size:12px;”, it stays smaller.
So I added and to my old code:smile:
But i don’t know is it really correct:sweat:
You will need to learn a little bit about Media queries to achieve what you want. below I am sharing a complete solution to your problem, feel free to tweak as per your liking.
First add this meta tag to your Html, This tells your page about the viewport width. <meta name="viewport" content="width=device-width, initial-scale=1.0">
then remove inline styling on caption and add this to your CSS
.caption {
font-size: 18px !important;
}
/*setting a max limit according to image's max width which is 800px helps the caption to stick to the width of image. I set 840 to allow some space around image*/
figure {
max-width: 840px !important;
}
/*This media rule tells the browser to change fontsize when width is smaller then 500px*/
@media (max-width: 500px) {
.caption {
font-size: 3.0vw !important;
}
}
This should get you as close to what you want.
You must have noticed the !important flags in CSS by now, They are there to override any styling from bootstrap.
Let me know if there is still something confusing.