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

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 >
        <div >
            <div >
                <i ></i>
            </div>
            <div >
                <div id="display"></div>
            </div>
            <div >
                <table>
                    <tr>
                        <td><button  id="clear">C</button></td>
                        <td><button  id="/">&divide;</button></td>
                        <td><button  id="*">&times;</button></td>
                        <td><button  id="backspace">&laquo;</button></td>
                    </tr>
                    <tr>
                        <td><button  id="7">7</button></td>
                        <td><button  id="8">8</button></td>
                        <td><button  id="9">9</button></td>
                        <td><button  id="-">&minus;</button></td>
                    </tr>
                    <tr>
                        <td><button  id="4">4</button></td>
                        <td><button  id="5">5</button></td>
                        <td><button  id="6">6</button></td>
                        <td><button  id="&plus;"> </button></td>
                    </tr>
                    <tr>
                        <td><button  id="1">1</button></td>
                        <td><button  id="2">2</button></td>
                        <td><button  id="3">3</button></td>
                        <td rowspan="2"><button  id="equal">&equals;</button></td>
                    </tr>
                    <tr>
                        <td><button  id="(">&lpar;</button></td>
                        <td><button  id="0">0</button></td>
                        <td><button  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;
  }

CodePudding user response：

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

CodePudding user response：

As I went through your code there is no code for making your page responsive .You should use media query to make it responsive for different screens that you use to access your page.Go through about responsive webpages and media query that will help you solve this