can dots be responsive in html?

Question

is it possible to make a carousel dots be responsive?? the height % Not working i don't know why... when i use vh it will be ugly in responsive what should i do... can someone give me a sign.. can anybody help me with this?? Thanks

.dot-container1 {
  text-align: center;
  padding: 20px;
  direction: rtl;
}

.dot1 {
  cursor: pointer;
  height: 15px;
  width: 3%;
  margin: 0 2px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active1,
.dot1:hover {
  background-color: #1e81c1;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="css/bootstrap-grid.css">
  <link rel="stylesheet" href="bootstrap.css">
  <script src="bootstrap.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="dot-container1">
    <span class="dot1" onclick="textslide(1)"></span>
    <span class="dot1" onclick="textslide(2)"></span>
    <span class="dot1" onclick="textslide(3)"></span>
    <span class="dot1" onclick="textslide(4)"></span>
    <span class="dot1" onclick="textslide(5)"></span>
    <span class="dot1" onclick="textslide(6)"></span>
    <span class="dot1" onclick="textslide(7)"></span>
  </div>
</body>

</html>

Does this answer your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — ATP, Jul 19 '21 at 08:16
Answer is already there but still you can refer to https://www.w3schools.com/cssref/css_units.asp — Rinshan Kolayil, Jul 19 '21 at 08:23

score 0 · Accepted Answer · answered Jul 19 '21 at 08:16

You can use same width and height for the dots. I have used dimension of 2vw.

.dot-container1 {
  text-align: center;
  padding: 20px;
  direction: rtl;
}

.dot1 {
  cursor: pointer;
  height: 2vw;
  width: 2vw;
  margin: 0 2px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active1,
.dot1:hover {
  background-color: #1e81c1;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="css/bootstrap-grid.css">
  <link rel="stylesheet" href="bootstrap.css">
  <script src="bootstrap.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="dot-container1">
    <span class="dot1" onclick="textslide(1)"></span>
    <span class="dot1" onclick="textslide(2)"></span>
    <span class="dot1" onclick="textslide(3)"></span>
    <span class="dot1" onclick="textslide(4)"></span>
    <span class="dot1" onclick="textslide(5)"></span>
    <span class="dot1" onclick="textslide(6)"></span>
    <span class="dot1" onclick="textslide(7)"></span>
  </div>
</body>

</html>

can dots be responsive in html?

1 Answers1