benjaoming/website
1
0
Fork 0
forked from data.coop/website
Code Issues Pull requests Releases Wiki Activity

Merge pull request 'Make grids reflow on narrow displays' (#75) from benjaoming/website:responsive-grids into new

Browse source 
Reviewed-on: data.coop/website#75
This commit is contained in:
benjaoming 2023-04-02 22:10:34 +00:00
parent 68f4f97271 1b638ab7ad
commit a3e3d6d2d8
1 changed files with 38 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
themes/datacoop2020/assets/static/css/style.scss
View file

@ -234,6 +234,11 @@ aside > footer img:hover {
margin: 0; margin: 0;
display: grid; display: grid;
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
@media(max-width: 700px) {
grid-template-columns: 100%;
}
align-items: start; align-items: start;
gap: 20px; gap: 20px;
dt { dt {
@ -293,6 +298,23 @@ dl.dl-services,
.badge-status { .badge-status {
margin-bottom: 40px; margin-bottom: 40px;
} }
@media(max-width: 700px) {
grid-template-columns: min-content auto;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
}
.badge-description {
grid-column-start : 1;
grid-column-end : 3;
}
}
} }
@ -317,6 +339,22 @@ dl.dl-services,
margin-top: 20px; margin-top: 20px;
} }
} }
@media(max-width: 700px) {
grid-template-columns: min-content auto;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
}
.badge-description {
grid-column-start : 1;
grid-column-end : 3;
}
}
} }
.badge-status { .badge-status {