How to make a text and an icon horizontally aligned stay consistent on screen resizing?

Question

I have a text and a switch icon purely designed in CSS. I got the design for switch from this page https://www.w3schools.com/howto/howto_css_switch.asp and some added modifications on the switch from this answer in stack overflow https://stackoverflow.com/a/39846603/5550284 .

Now I put a div around it by giving id box and defined a border so that I can move the entire div to the right of the screen.

This is how my code looks like so far

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style type="text/css">
                 .switch {
                position: relative;
                display: inline-block;
                width: 90px;
                height: 34px;
              }

              .switch input {display:none;}

              .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ca2222;
                -webkit-transition: .4s;
                transition: .4s;
              }

              .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
              }

              input:checked + .slider {
                background-color: #2ab934;
              }

              input:focus + .slider {
                box-shadow: 0 0 1px #2196F3;
              }

              input:checked + .slider:before {
                -webkit-transform: translateX(55px);
                -ms-transform: translateX(55px);
                transform: translateX(55px);
              }

              /*------ ADDED CSS ---------*/
              .on
              {
                display: none;
              }

              .on, .off
              {
                color: white;
                position: absolute;
                transform: translate(-50%,-50%);
                top: 50%;
                left: 50%;
                font-size: 10px;
                font-family: Verdana, sans-serif;
              }

              input:checked+ .slider .on
              {display: block;}

              input:checked + .slider .off
              {display: none;}

              /*--------- END --------*/

              /* Rounded sliders */
              .slider.round {
                border-radius: 34px;
              }

              .slider.round:before {
                border-radius: 50%;}

                #box {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 15%;
                  height: 15%;
                  /*color: white;*/
                  font-family: "Trebuchet MS", Helvetica, sans-serif;
                  font-size: 2rem;
                  border: 2px solid blue;
                  left: 100%;
                  /*color: black;*/
                  /*color: white;*/
               }

        </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    </head>
<body>
  <div id="box">
    <span>Prompting</span>
    <label class="switch">
      <input type="checkbox" id="togBtn">
      <div class="slider round">
          <span class="on">ON</span>
          <span class="off">OFF</span>
      </div>
    </label>
  </div>


    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript">

    </script>
</body>
</html>

This is how it looks on the page

Now when I try to resize the page, the switch icon screws up

Now before even I can do anything, the content inside the div box screws up. I added display: flex so that the text and icon can stay horizontal but on screen resizing, they kind of overlap each other.

What's going wrong here? Why can't the text and the switch icon inside the div remain consistent?

You can use percentage instead of pixcels in your toggle button or use media query. — Sohan, Oct 20 '19 at 13:04

Swaroop Deval · Accepted Answer · 2019-10-20T13:15:51.980

Remove the width and height you gave to #box. Also use justify-content: flex-end;, to move them to right side.

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}

  #box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /*color: white;*/
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 2rem;
    border: 2px solid blue;
    left: 100%;
    /*color: black;*/
    /*color: white;*/
 }

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="box">
  <span>Prompting</span>
  <label class="switch">
    <input type="checkbox" id="togBtn">
    <div class="slider round">
        <span class="on">ON</span>
        <span class="off">OFF</span>
    </div>
  </label>
</div>

yup after removing width and height, it seems to have solved the issue. Thanks! — Souvik Ray, Oct 20 '19 at 14:16

How to make a text and an icon horizontally aligned stay consistent on screen resizing?

1 Answers1