How to make element stretch all the way

Here’s the code :-
https://codepen.io/guruthecoder/pen/BaQPagw

How can I make the figcaption (that says “Steve Jobs” and is just below the image) be as long as the image.


Thanks!!

Hi @gururajankappa

Try:
width: 100%

2 Likes

Hi @gururajankappa
Adding width 100% or maybe 99% is correct. Another option you could try Is too add padding to the left and right.

#img-caption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 0.5vw;
    text-align: center;
    max-width: 100%;
    font-size: 1.5em;
    padding-left: 42%;
    padding-right: 42%;
1 Like

max-width: says how wide the item can be at maximum - ofcourse it can still be smaller. Opposite is min-width: and both are important for responsive designs.
However if you want a static width - that’s width:.

2 Likes

On the image caption?
THanks

I’ll try it out! THanks

OK I’LL TRY THAT! Thanks!!

On which element? 20

Why did you use the measures you did. Thanks!!
But it still doesn’t seem to work all the time.

I have no idea what I have to do now.

this might provide a useful method Tryit Editor v3.6
:+1:

I got it to work!!
Even though all answers helped me, they really did.
I think @Jagaya’s answer should be the answer.
@MrBondx helped me as well.
All the answers helped me.