CODEWITHSUNDEEP
htmlcss
user10153593
user10153593

Reputation:

How to change the font size of element without disrupting any spacing?

html, body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  left: 490px;
  top: 100px;
  background-color: #66ff66;
  width: 400px;
}
input {
  width: 100%;
  height: 100px;
  border: none;
}
table {
  font-size: 40px;
  font-family: 'Orbitron';
  display: flex;
  flex-wrap: all;
  justify-content: center;
}
td {
  padding: 22px 22px;
  text-align: center;
}
td:hover {
  animation-name: animate;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
}
@keyframes animate {
  0% {color: #ff9900; font-size: 45px;}
  25% {color: #ff0000;}
  50% {color: #66ffcc;}
  75% {color: #3399ff;}
  100% {color: #6600ff;}
}
#td-0 {
  position: relative;
  left: 125px;
}
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Calculator</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    </head>
    <body>
      <div class="container">
        <input type="text" name="screen" disabled>
        <table class="calc-buttons">
          <tr class="row-1">
            <td>C</td>
            <td>CE</td>
            <td><i class="fas fa-long-arrow-alt-left"></i></td>
            <td>/</td>
          </tr>
          <tr class="row-2">
            <td>9</td>
            <td>8</td>
            <td>7</td>
            <td>*</td>
          </tr>
          <tr class="row-3">
            <td>6</td>
            <td>5</td>
            <td>4</td>
            <td>-</td>
          </tr>
          <tr class="row-4">
            <td>3</td>
            <td>2</td>
            <td>1</td>
            <td>+</td>
          </tr>
          <tr class="row-5">
            <td id="td-0">0</td>
          </tr>
        </table>
      </div>
    </body>
  </html>

Hey guys I'm styling a calculator and I'm trying to change the font size of each button when hovering. Is there a way to do this so the character on the button or the td element will change size independently of its container. So it doesn't push everything out of the way? Any help would be greatly appreciated, thanks guys.

Upvotes: 2

Views: 62

Answers (2)

Programmer
Programmer

Reputation: 2123

You can make the padding smaller on hover, so it would "cancel" the greater font-size. So because the change in the font-size is 5 pixels, where you change the font-size I've added padding: 17px (5 pixels less than the initial padding - 22px). That's in the code snippet. Another thing you can do is to use scale transform that enlarges the element without affecting other elements positioning.

html, body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  left: 490px;
  top: 100px;
  background-color: #66ff66;
  width: 400px;
}
input {
  width: 100%;
  height: 100px;
  border: none;
}
table {
  font-size: 40px;
  font-family: 'Orbitron';
  display: flex;
  flex-wrap: all;
  justify-content: center;
}
td {
  padding: 22px 22px;
  text-align: center;
}
td:hover {
  animation-name: animate;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;

}
@keyframes animate {
  0% {color: #ff9900; font-size: 45px; padding: 17px;}
  25% {color: #ff0000;}
  50% {color: #66ffcc;}
  75% {color: #3399ff;}
  100% {color: #6600ff;}
}
#td-0 {
  position: relative;
  left: 125px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<title>Calculator</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <input type="text" name="screen" disabled>
      <table class="calc-buttons">
        <tr class="row-1">
          <td>C</td>
          <td>CE</td>
          <td><i class="fas fa-long-arrow-alt-left"></i></td>
          <td>/</td>
        </tr>
        <tr class="row-2">
          <td>9</td>
          <td>8</td>
          <td>7</td>
          <td>*</td>
        </tr>
        <tr class="row-3">
          <td>6</td>
          <td>5</td>
          <td>4</td>
          <td>-</td>
        </tr>
        <tr class="row-4">
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>+</td>
        </tr>
        <tr class="row-5">
          <td id="td-0">0</td>
        </tr>
      </table>
	</div>
  </body>
</html>

Upvotes: 1

Martin
Martin

Reputation: 1

what about adding to make the font doesn't get out from your space?

Upvotes: 0

Related Questions