Resume
/
calculator
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make responsive

This commit is contained in:
andrzej 2024-05-26 13:04:03 +02:00
parent 57a69a8e9c
commit f19a7e627a
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.css
View File

@ -9,13 +9,29 @@
src: url("DS-DIGIB.TTF");
}
html {
font-size: 16px;
@media screen and (min-width:601px) {
html {
font-size: 16px;
}
}
@media screen and (max-width:600px) {
html {
font-size: 12px;
}
}
body {
padding: 0px;
margin: 0px;
}
#calculator {
height: 800px;
width: 550px;
background-color: white;
height: 50rem;
max-height: 100vh;
width: 35rem;
max-width: 100vw;
margin: auto;
background: rgb(68, 64, 64);
background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
@ -25,6 +41,7 @@ html {
#calculator-content {
height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
@ -37,7 +54,7 @@ html {
"numbers numbers numbers operators"
"numbers numbers numbers operators"
;
gap: 1rem;
gap: 1em;
}
@ -60,7 +77,7 @@ html {
grid-area: display;
justify-self: end;
align-self: end;
height: 9rem;
height: 9em;
width: 100%;
display: grid;
grid-template-rows: 1fr 6fr 1fr;