Oprah Winfrey tribute page, got a problem with the image caption

Oprah Winfrey tribute page, got a problem with the image caption
0
#1

http://codepen.io/AlexaKV/pen/RKKQQR

Hi guys! Any feedback if highly appreciated!
I’ve checked with the given link after I finished my page, and he had

for the caption. It didn’t work for me, the text would not stay fixed and would be too large, maybe the image size is too small. So I used

Aug 21, 2013,Andy Cohen interviews Oprah Winfrey at 'Watch What Happens' late-night, interactive talk show.

I don’t think that’s right. Anyway, waiting for any hints, thanks!

#2

Hi AlexaKV,

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!

Jack :slight_smile:

#3

Hey! thank you for your comment!
I tried that but when I switched from editor view to the full window view, it would not look good :disappointed_relieved:

#4

I Guess this is what you are looking for.

<figure><img class="img-responsive img-rounded center-block" src="http://cdn.thedailybeast.com/content/dailybeast/articles/2013/08/16/oprah-winfrey-s-fabulous-butler-press-tour-the-best-moments-video/jcr:content/image.crop.800.500.jpg/45890058.cached.jpg"
        alt="Andy Cohen interviews Oprah Winfrey">
      <caption>
        <p class="caption text-center" style="font-size:12px;">Aug 21, 2013,Andy Cohen interviews Oprah Winfrey at 'Watch What Happens' late-night, interactive talk show.</p>
      </caption>
    </figure>

Replace your image and Caption elements with this Figure element and you will get the desired result. I Hope this was what your are looking for.

#5

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:

#6

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.

#7

Thank you! I’ll try to