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

27
src/App.css
View File

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