How can I make the caption responsive?

user_17182552 0
Viewed 57

I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously. The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.

.page-overview{
        width: 100%;
        border: 1px solid black;
    }

    .overview-content img{
        width: 100%;
    }
    
    .caption{
        position: absolute;
        top: 20%;
        left: 18px;
        font-size: 80%;
        font-family: 'Source Sans Pro', sans-serif;
        z-index: 1;
    }
    .caption span{
        display: block;
        margin: 8px 0;
        padding: 10px 17px;
        border-radius: 3px;
        background-color: #00000033;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test YOU</title>
  
</head>
<body>

    <!--Here can have other content too-->
    <div class="page-overview">
        <div class="overview-content"><a href="#"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"></a>
            <div class="caption">
                <span>Test your best here</span>
                <span>It's Yum </span>
            </div>
        </div>
    </div>

css html
2 Answers

Remove position: absolute; and use relative instead. absolute will not account for browser shrinkage, it will just still stay in the specified area.

.page-overview {
  width: 100%;
  border: 1px solid black;
}

.overview-content img {
  width: 100%;
}

.caption {
  position: relative;
  width: fit-content;
  margin: auto 0;
  top: 20%;
  left: 18px;
  font-size: 80%;
  font-family: 'Source Sans Pro', sans-serif;
  z-index: 1;
}

.caption span {
  display: block;
  margin: 8px 0;
  padding: 10px 17px;
  border-radius: 3px;
  background-color: #00000033;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test YOU</title>

</head>

<body>

  <!--Here can have other content too-->
  <div class="page-overview">
    <div class="overview-content">
      <a href="#"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"></a>
      <div class="caption">
        <span>Test your best here</span>
        <span>It's Yum </span>
      </div>
    </div>
  </div>

user_164963570

The main thing is to wrap a position:absolute divs with a position:relative div, so the absolute div will be relative that that parent. Besides that, I used flexbox to center the content. That is assuming you want the caption ON the image...

.page-overview{
        width: 100%;
        border: 1px solid black;
    }

    .overview-content img{
        width: 100%;
    }
    
    .caption{
        position: absolute;
        top: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        font-size: 80%;
        font-family: 'Source Sans Pro', sans-serif;
        z-index: 1;
    }
    .caption span{
        display: block;
        margin: 8px 0;
        padding: 10px 17px;
        border-radius: 3px;
        background-color: #00000033;
    }
    
    .image-wrapper {
      position: relative;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test YOU</title>
  
</head>
<body>

    <!--Here can have other content too-->
    <div class="page-overview">
        <div class="overview-content">
          <div class="image-wrapper">
            <a href="#">
          
              <img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
            </a>
              <div class="caption">
                  <span>Test your best here</span>
                  <span>It's Yum </span>
              </div>
            </div>
        </div>
    </div>

user_20447060
Related