Adjust styles for smaller screens
This commit is contained in:
parent
62560df882
commit
c64a73f4e6
1 changed files with 6 additions and 0 deletions
|
|
@ -33,6 +33,7 @@ header {
|
|||
flex: 0 0 auto;
|
||||
padding: 15px 0;
|
||||
background-color: var(--dark-trans);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
|
|
@ -172,6 +173,7 @@ footer {
|
|||
padding: 10px;
|
||||
background-color: var(--dark-trans);
|
||||
letter-spacing: 2px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
footer a {
|
||||
|
|
@ -185,10 +187,14 @@ footer a:hover, footer a:focus {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.calculator {
|
||||
max-width: 90vw;
|
||||
height: 70%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-screen {
|
||||
|
|
|
|||
Loading…
Reference in a new issue