Calculator not shrinking to fit screen width-CodePudding

@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@600&display=swap');

* {
  margin: 0;
}

html {
  text-align: center;
  font-family: 'Rokkitt', serif;
}

.calc {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 95vh;
  height: 100vh;
  overflow: hidden;
  background-color: antiquewhite;
}

.container {
  border: 10px solid rgb(0, 0, 0);
  border-radius: 5px;
  background-color: rgb(77, 77, 77);
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(6, 80px);
  gap: 1px;
}

.display {
  border: 3px solid black;
  background-color: aqua;
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  padding: 5px;
  margin: 3px;
  font-size: 3em;
}

button {
  margin: 1px;
  border: none;
  border-radius: 5%;
  font-size: 1.7em;
}

button:hover {
  filter: brightness(0.8);
}

.operand {
  background-color: rgb(211, 211, 201);
}

.decimal {
  background-color: rgb(211, 211, 201);
}

.operator {
  background-color: rgb(31, 142, 0);
}

.equal {
  background-color: rgb(255, 255, 0);
}

.clear {
  background-color: rgb(255, 51, 0);
}

#zero {
  grid-column: 1/3;
}

.equal {
  grid-column: 1/-2;
}

<!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" />
    <script src="script.js" defer></script>
    <title>Calculator</title>
  </head>

  <body>
    <main >
      <div >
        <div >0</div>
        <button  value="7">7</button>
        <button  value="8">8</button>
        <button  value="9">9</button>
        <button >AC</button>
        <button  value="4">4</button>
        <button  value="5">5</button>
        <button  value="6">6</button>
        <button >/</button>
        <button  value="1">1</button>
        <button  value="2">2</button>
        <button  value="3">3</button>
        <button >*</button>
        <button  id="zero" value="0">0</button>
        <button  value=".">.</button>
        <button >-</button>
        <button  value="=">=</button>
        <button > </button>
      </div>
    </main>
  </body>
</html>

I've been trying for a while to make my calculator fit the screen but can't solve this problem.

When the screen size is less than 500px the calculator stays on the same width and does not fit the screen, i tried everything but not sure why it's not working.

this is the calculator: https://fedechini.github.io/Calculator/

any advice on how to fix that?

thanks in advance :)

CodePudding user response：

use minmax() for your .container .

grid-template-columns: repeat(4, minmax(10px, 100px));

@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@600&display=swap');

* {
  margin: 0;
}

html {
  text-align: center;
  font-family: 'Rokkitt', serif;
}

.calc {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 95vh;
  height: 100vh;
  overflow: hidden;
  background-color: antiquewhite;
}

.container {
  border: 10px solid rgb(0, 0, 0);
  border-radius: 5px;
  background-color: rgb(77, 77, 77);
  display: grid;
  grid-template-columns: repeat(4, minmax(10px, 100px));
  grid-template-rows: repeat(6, 80px);
  gap: 1px;
}

.display {
  border: 3px solid black;
  background-color: aqua;
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  padding: 5px;
  margin: 3px;
  font-size: 3em;
}

button {
  margin: 1px;
  border: none;
  border-radius: 5%;
  font-size: 1.7em;
}

button:hover {
  filter: brightness(0.8);
}

.operand {
  background-color: rgb(211, 211, 201);
}

.decimal {
  background-color: rgb(211, 211, 201);
}

.operator {
  background-color: rgb(31, 142, 0);
}

.equal {
  background-color: rgb(255, 255, 0);
}

.clear {
  background-color: rgb(255, 51, 0);
}

#zero {
  grid-column: 1/3;
}

.equal {
  grid-column: 1/-2;
}

<!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" />
    <script src="script.js" defer></script>
    <title>Calculator</title>
  </head>

  <body>
    <main >
      <div >
        <div >0</div>
        <button  value="7">7</button>
        <button  value="8">8</button>
        <button  value="9">9</button>
        <button >AC</button>
        <button  value="4">4</button>
        <button  value="5">5</button>
        <button  value="6">6</button>
        <button >/</button>
        <button  value="1">1</button>
        <button  value="2">2</button>
        <button  value="3">3</button>
        <button >*</button>
        <button  id="zero" value="0">0</button>
        <button  value=".">.</button>
        <button >-</button>
        <button  value="=">=</button>
        <button > </button>
      </div>
    </main>
  </body>
</html>

CodePudding user response：

Or you could just set the width in percent while giving the container a width of 100% and a max-width so it won't grow much

.container {
    border: 10px solid rgb(0, 0, 0);
    border-radius: 5px;
    background-color: rgb(77, 77, 77);
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(6, 80px);
    gap: 1px;
    max-width: 500px;
    width: 100%;
}