fix: portrait mode for mobile

This commit is contained in:
mco-system 2023-04-11 20:29:27 +11:00
parent 961d5d00ea
commit ad0f334fd4
2 changed files with 25 additions and 19 deletions

View File

@ -1,3 +1,16 @@
@media screen and (min-width: 45em) {
.slot {
display: flex;
flex: 1;
justify-content: center;
text-align: center;
flex-direction: row;
margin: 0.3em 0;
width: 20em;
}
}
@media screen and (max-width: 44em) {
.slot { .slot {
display: flex; display: flex;
flex: 1; flex: 1;
@ -7,6 +20,7 @@
margin: 0.3em 0; margin: 0.3em 0;
width: 21em; width: 21em;
} }
}
.slot_info, .slot_info,
.slot_info_buttons { .slot_info_buttons {

View File

@ -29,9 +29,9 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 2em; gap: 1.4em;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
width: 100vw; width: 40em;
transform: translateZ(2); transform: translateZ(2);
} }
.content { .content {
@ -70,15 +70,7 @@
width: 21em; width: 21em;
/* background-color: green; */ /* background-color: green; */
} }
.center_wrapper { .center_wrapper ,
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 21em;
/* background-color: blue; */
}
.header_wrapper { .header_wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;