CODEWITHSUNDEEP
htmlcssresponsive-designresponsive
Hedvig
Hedvig

Reputation: 125

How to make text in responsive circle <div> responsive as well

enter image description here

I have dealt with this problem for some days now and it's making me crazy, I want the text inside the circle to move in the same position inside the cirkle div when I make the screen smaller, as illustrated in the picture.

If you have any tips please share!

CSS Code and Html Code: 

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  margin-top: 29%;
  margin-left: 4%;
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 20%;
  bottom: 20%;
  left: 18%;
  font-size: auto;
  position: absolute;
  text-align: center;
  width: 60%;
  opacity: 1;
}
<div class="circleBase contact-circle">

  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>

</div>

Upvotes: 4

Views: 1890

Answers (2)

Tanju Karakaya
Tanju Karakaya

Reputation: 1

Responsive web site - @media (min-width:450px) and (max-width:900px) { css style }

<div class="circleBase contact-circle">

<div id="contact-text">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>

</div>

Css @media Example

.circleBase {
height:800px;
width:800px;
}

@media (max-width:479px) {

.circleBase {

height: 400px;
width:400px;

}
}

Upvotes: -2

Temani Afif
Temani Afif

Reputation: 273010

Use another method to center the text. Here is an idea with flex:

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 0;
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center
}
<div class="circleBase contact-circle">
  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>
</div>

Upvotes: 6

Related Questions