Better screen usage for smaller mobile size (#1348)

* Updating styles to use space better for smaller mobile

* Fixing side-nav issue
This commit is contained in:
Robbie Davis 2022-07-01 14:46:41 -04:00 committed by GitHub
parent 3430a61480
commit b5f7ff5aac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions

View File

@ -19,7 +19,7 @@
}
.content-wrapper {
padding: 0 10px 0;
padding: 0 5px 0;
overflow: hidden;
&.closed {

View File

@ -47,6 +47,10 @@
align-items: center;
justify-content: space-around;
@media (max-width: 576px) {
padding: 0 10px 0 5px;
}
.btn {
text-decoration: none;
color: hsla(0,0%,100%,.7);

View File

@ -2,7 +2,7 @@
padding-bottom: 10px;
width: 190px;
background-color: var(--side-nav-bg-color);
height: calc(100vh - 85px);
height: calc((var(--vh)*100) - 85px);
position: fixed;
margin: 0;
left: 10px;
@ -36,7 +36,7 @@
padding: 10px 0;
width: 55vw;
background-color: var(--side-nav-mobile-bg-color);
height: calc(100vh - 56px);
height: calc((var(--vh)*100) - 56px);
position: fixed;
margin: 0;
left: 0;
@ -61,7 +61,7 @@
.side-nav-overlay {
background-color: var(--side-nav-overlay-color);
width: 100vw;
height: calc(100vh - 56px);
height: calc((var(--vh)*100) - 56px);
position: absolute;
left: 0;
z-index: 998;