Calculator not shrinking to fit screen width
Question
@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 class="calc"> <div class="container"> <div class="display">0</div> <button class="operand" value="7">7</button> <button class="operand" value="8">8</button> <button class="operand" value="9">9</button> <button class="clear">AC</button> <button class="operand" value="4">4</button> <button class="operand" value="5">5</button> <button class="operand" value="6">6</button> <button class="divide operator">/</button> <button class="operand" value="1">1</button> <button class="operand" value="2">2</button> <button class="operand" value="3">3</button> <button class="multiply operator">*</button> <button class="operand" id="zero" value="0">0</button> <button class="decimal" value=".">.</button> <button class="subtract operator">-</button> <button class="equal" value="=">=</button> <button class="add operator">+</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:)
2 answers
solution1
0 2022-04-05 10:35:19
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 class="calc"> <div class="container"> <div class="display">0</div> <button class="operand" value="7">7</button> <button class="operand" value="8">8</button> <button class="operand" value="9">9</button> <button class="clear">AC</button> <button class="operand" value="4">4</button> <button class="operand" value="5">5</button> <button class="operand" value="6">6</button> <button class="divide operator">/</button> <button class="operand" value="1">1</button> <button class="operand" value="2">2</button> <button class="operand" value="3">3</button> <button class="multiply operator">*</button> <button class="operand" id="zero" value="0">0</button> <button class="decimal" value=".">.</button> <button class="subtract operator">-</button> <button class="equal" value="=">=</button> <button class="add operator">+</button> </div> </main> </body> </html>
solution2
0 2022-04-05 10:55:50
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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trying to fit a slideshow width to fit screen
Shrinking Nav bar based on Media Screens/Screen Width
Stretch height/width to fit screen in <Div> Tag
Resizing canvas/webgl to fit screen width and heigh
Expand multiple divs to fit horizontal width of screen
Auto-fit fixed-width layout to screen width
The width of the footer of one of my web pages is shrinking more than it should on a small screen and not appearing at the bottom - how to correct it?
Prevent element width from shrinking
Video/Image Slider resize to fit screen (both width and height)
FullCalendar v5: How to make content width fit screen
Related Tags