SpreadQuiz/style/spreadquiz_mobile.css
2024-09-25 09:19:28 +02:00

79 lines
1.4 KiB
CSS

@media only screen and (max-width: 800px) {
section#info_pane {
height: 4.5em;
overflow: clip;
left: 0;
bottom: 0;
right: 0;
top: unset;
width: 100%;
transition: 0.3s ease;
}
section#content_pane {
width: 100vw;
height: calc(100vh - 4.5em);
}
iframe#content_frame {
width: 100vw;
}
section.game-box {
width: calc(100vw - 6.5em);
height: calc(100vw - 6.5em);
margin-right: 0;
margin-bottom: 1em;
}
section.game-box-caption {
width: 100vw;
}
section#info_pane:active, section#info_pane:hover, section#user_info {
height: 12em;
}
section.challenge {
width: calc(100vw - 3em);
}
section.answer label {
max-width: 80%;
}
section#infobox {
top: unset;
left: 0;
right: 0;
bottom: 0;
max-height: 4em;
min-height: unset;
transition: 0.3s ease;
}
section#infobox:active, section#infobox:hover {
max-height: 50vh;
}
section#test_display {
position: fixed;
display: block;
top: 0;
bottom: 6em;
left: 0;
right: 0;
overflow: scroll;
padding-top: 2em;
}
section.window {
width: calc(100vw - 2em);
padding: 1em;
max-height: calc(100vh - 2em);
}
td {
display: block;
}
}