Fix event display on small screens
This commit is contained in:
parent
0a5ebc1246
commit
42afaeee47
2 changed files with 36 additions and 2 deletions
|
@ -54,6 +54,23 @@
|
|||
gap: var(--gap);
|
||||
margin: var(--gap);
|
||||
|
||||
@media (width < 700px) {
|
||||
/*flex-direction: column;
|
||||
gap: 0;*/
|
||||
|
||||
.calendar {
|
||||
display: none !important;
|
||||
/*align-self: flex-start;
|
||||
margin-bottom: -5px;
|
||||
margin-left: 25px;
|
||||
|
||||
.day-month {
|
||||
border-radius: 0 !important;
|
||||
height: 24px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
background-color: var(--color-surface);
|
||||
flex-grow: 1;
|
||||
|
|
|
@ -45,6 +45,23 @@
|
|||
gap: var(--gap);
|
||||
margin: var(--gap);
|
||||
|
||||
@media (width < 700px) {
|
||||
/*flex-direction: column;
|
||||
gap: 0;*/
|
||||
|
||||
.calendar {
|
||||
display: none !important;
|
||||
/*align-self: flex-start;
|
||||
margin-bottom: -5px;
|
||||
margin-left: 25px;
|
||||
|
||||
.day-month {
|
||||
border-radius: 0 !important;
|
||||
height: 24px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
background-color: var(--color-surface);
|
||||
flex-grow: 1;
|
||||
|
@ -60,7 +77,7 @@
|
|||
|
||||
.date-location {
|
||||
opacity: 0.75;
|
||||
width: 400px;
|
||||
width: 100%;
|
||||
height: calc(19px - 3px);
|
||||
margin-bottom: 6px;
|
||||
animation-delay: -100ms;
|
||||
|
@ -69,7 +86,7 @@
|
|||
.title {
|
||||
font-size: 1.7em;
|
||||
font-weight: 700;
|
||||
width: 400px;
|
||||
width: 100%;
|
||||
height: calc(32px - 3px);
|
||||
animation-delay: -250ms;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue