css tweaks for better phone display

This commit is contained in:
James Tomasino 2020-09-26 20:48:58 +00:00
parent 3987c26428
commit edc9543120
1 changed files with 22 additions and 8 deletions

View File

@ -1,8 +1,3 @@
.calendar-wrapper {
display: block;
/* max-height: 500px; */
/* overflow-y: scroll; */
}
.calendar {
font-family: sans-serif;
width: 100%;
@ -61,6 +56,7 @@
position: relative;
height: 32px;
cursor: pointer;
overflow: hidden;
}
.calendar tbody tr td:last-child {
border-right: 1px solid #626E7E;
@ -78,6 +74,16 @@
display: block;
}
@media (max-width: 60em) {
.calendar-wrapper {
display: block;
overflow-x: scroll;
}
.calendar {
min-width: 800px;
}
.calendar tbody tr td.hour {
font-size: 16px;
}
.calendar thead tr th .long {
display: none;
}
@ -91,6 +97,17 @@
}
}
@media (max-width: 27em) {
.calendar-wrapper {
display: block;
overflow-x: scroll;
}
.calendar {
min-width: 800px;
}
.calendar tbody tr td.hour {
font-size: 16px;
text-align: right;
}
.calendar thead tr th {
font-size: 65%;
}
@ -107,9 +124,6 @@
background: #d1d5db;
color: #626E7E;
}
.calendar tbody tr td.hour {
font-size: 1.7em;
}
.calendar tbody tr td.hour span {
transform: translateY(16px) rotate(270deg);
-webkit-transform: translateY(16px) rotate(270deg);