Fix small screen button sizes #37

Merged
jgeorgi merged 1 commits from msv-button-fixes into main 2023-12-08 15:38:24 +00:00
Showing only changes of commit ab68a0c4e8 - Show all commits

View File

@@ -122,20 +122,22 @@
.image-menu { .image-menu {
grid-area: menu-view; grid-area: menu-view;
margin: 5px; margin: 5px;
width: 50%; /*width: 90%;*/
max-width: 400px; max-width: 400px;
min-width: 192px; min-width: 192px;
flex: 0 0 auto;
} }
.image-menu .button { .image-menu .button {
aspect-ratio: 1; aspect-ratio: 1;
height: auto; height: auto;
padding: 5px; padding: 5px;
flex: 1 1 0%;
} }
.button > img { .button > svg {
height: 100%; aspect-ratio: 1;
height: auto;
width: 100%;
} }
@media (max-height: 450px) and (orientation: landscape) { @media (max-height: 450px) and (orientation: landscape) {
@@ -165,10 +167,10 @@
.image-menu { .image-menu {
flex-direction: column; flex-direction: column;
aspect-ratio: .25;
width: auto; width: auto;
min-width: 0; min-width: 0;
flex: 1 1 0%; height: 100%;
max-height: 100%;
} }
.image-menu .button { .image-menu .button {
@@ -177,9 +179,10 @@
height: 100%; height: 100%;
flex: 1 1 0%; flex: 1 1 0%;
border-bottom: 1px solid var(--f7-segmented-raised-divider-color); border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
border-bottom-left-radius: 0px !important;
} }
.button > img { .button > svg {
width:auto; width:auto;
height: 100%; height: 100%;
} }