'my calculator created in html,css,js has a problem of not fitting in any screen size

so I created a calculator using html,css,js . In pc/big screen size it looks great. But in smaller screen size like phone/tablet it completely cuts off and doesn't adjust to the size. Here is example pictures:

1080x2280 screen size picture

720x1280 screen size picture

as you can see it cuts off the text and sides of the calculator on the 720x1280

but I want it to not cut off. I did a lot of searching but couldn't get any help. I would be happy if you helped me.

here is the code.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Smooth Calculator</title>
</head>
<body>
    <div class="container">
        <div class="calculator dark">
            <div class="theme-toggler active">
                <i class="toggler-icon"></i>
            </div>
            <div class="display-screen">
                <div id="display"></div>
            </div>
            <div class="buttons">
                <table>
                    <tr>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">&divide;</button></td>
                        <td><button class="btn-operator" id="*">&times;</button></td>
                        <td><button class="btn-operator" id="backspace">&laquo;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="7">7</button></td>
                        <td><button class="btn-number" id="8">8</button></td>
                        <td><button class="btn-number" id="9">9</button></td>
                        <td><button class="btn-operator" id="-">&minus;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="4">4</button></td>
                        <td><button class="btn-number" id="5">5</button></td>
                        <td><button class="btn-number" id="6">6</button></td>
                        <td><button class="btn-operator" id="&plus;">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="1">1</button></td>
                        <td><button class="btn-number" id="2">2</button></td>
                        <td><button class="btn-number" id="3">3</button></td>
                        <td rowspan="2"><button class="btn-equal" id="equal">&equals;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="(">&lpar;</button></td>
                        <td><button class="btn-number" id="0">0</button></td>
                        <td><button class="btn-operator" id=")">&rpar;</button></td>
                    </tr>
                </table>
            </div>
        </div>
        <p>&copy; 2022 | AK PR</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

@font-face {
    font-family: 'Product-Sans';
    src: url('font.ttf');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: Product-Sans;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    transition: all 0.5s ease;
}

a {
    text-decoration: none;
    color: #fff;
}

body {
    background-image: linear-gradient( to bottom right, rgba(79,51,176,1.0),rgba(210,53,165));
}

.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}

.calculator {
    position: relative;
    height: auto;
    width: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 30px #000;
}

.theme-toggler {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.theme-toggler.active {
    color: #333;
}

.theme-toggler.active::before {
    background-color: #fff;
}

.theme-toggler::before {
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #333;
    z-index: -1;
}

#display {
    margin: 0 10px;
    height: 150px;
    width: auto;
    max-width: 270px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 30px;
    margin-bottom: 20px;
    overflow-x: scroll;
  }

#display::-webkit-scrollbar {
    display: block;
    height: 3px;
}

button {
    height: 60px;
    width: 60px;
    border: 0;
    border-radius: 30px;
    margin: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: all 200ms ease;
}

button:hover {
    transform: scale(1.1);
}

button#equal {
    height: 130px;
}

/* light theme */

.calculator {
    background-color: #fff;
}

.calculator #display {
    color: #0a1e23;
}

.calculator button#clear {
    background-color: #ffd5d8;
    color: #fc4552;
}

.calculator button.btn-number {
    background-color: #c3eaff;
    color: #000000;
}

.calculator button.btn-operator {
    background-color: #ffd0fb;
    color: #f967f3;
  }
  
  .calculator button.btn-equal {
    background-color: #adf9e7;
    color: #000;
  }

  /* dark theme */

  .calculator.dark {
    background-color: #071115;
  }

  .calculator.dark #display {
    color: #f8fafb;
  }

  .calculator.dark button#clear {
    background-color: #2d191e;
    color: #bd3740;
  }

  .calculator.dark button.btn-number {
    background-color: #1b2f38;
    color: #f8fafb;
  }

  .calculator.dark button.btn-operator {
    background-color: #2e1f39;
    color: #aa00a4;
  }
  
  .calculator.dark button.btn-equal {
    background-color: #223323;
    color: #ffffff;
  }
javascriptandroidhtmlcssfullscreen


Solution 1:[1]

You can use CSS media queries so that you can design for different screen resolution

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user101

Related Questions