CODEWITHSUNDEEP
htmlcssbootstrap-4
Muhammed Mahir
Muhammed Mahir

Reputation: 178

How would I make a content within and the image to be responsive

I have a transparent circle which is an image. I wanted to place content within the circle. But the moment I change the size of the screen either the circle changes its size or the text within goes away from the circle. How would I fix this?

I'm using bootstrap 4 https://codepen.io/mahirq8/pen/oNNMvwy

.img-1 {
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  bottom: 250px;
  left: 220px;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title" style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms" style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>courses are<br>thoughtfully curated to<br>provoke creativity,<br>nurture growth and<br>push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Here's my website where you can see the actual result at the midsection with 3 circles. Any suggestions would be highly appreciated.

Thank You

Upvotes: 0

Views: 37

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29257

There are some steps you need to take:

  1. .container should be position: relative so the text will be position: absolute relatively to it.
  2. To make the text ALWAYS aligned to the center, there are some tricks, but my favorite is
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%);
}
  1. Make the font-size relatively to the screen size. You can do this with media queries

.container {
  position: relative;
}

img {
  max-width: 100%;
}

.img-1 {   
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title"
              style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>

            Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms"
             style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>
            courses are<br>
            thoughtfully curated to<br>
            provoke creativity,<br>
            nurture growth and<br>
            push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/moshfeu/full/wvvxvaz

Upvotes: 1

Related Questions