Question 390507 in Html Question posted in
Some basic documentation can be found here.

How to create a responsive circle with two lines of text in HTML and CSS?

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  border-radius: 50%;
  padding: 20px;
  aspect-ratio: 1 / 1;
}
<body>
  <div class="circle">
    <div>2</div>
    <div>AP</div>
  </div>
  <div class="circle">
    <div>200,000</div>
    <div>AP</div>
  </div>
</body>

Why is the aspect-ratio CSS property not working here? When the text inside is long enough (like if I use 200,000 instead of 2, it is a square aspect ratio perfect circle). But I need it to work when the text is short too.

I want to avoid Javascript and hardcoding any widths or heights, because the circle should be fully responsive to the text inside of it, and be the minimum size required to display it (while also being a square aspect ratio).

Tags:

2

Answers


  1. 0

    Define a min-height equal to 2 lines of content using 2lh

    .circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  border-radius: 50%;
  padding: 20px;
  aspect-ratio: 1;
  min-height: 2lh;
}


body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height:100vh;
}
    <div class="circle">
  <div>20</div>
  <div>AP</div>
</div>
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Circles with Text</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40vw;
    height: 40vw;
    max-width: 200px;
    max-height: 200px;
    margin: 10px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
    line-height: 1.2;
  }
</style>
</head>
<body>

<div class="container">
  <div class="circle">Line 1</div>
  <div class="circle">Line 2</div>
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search