forked from data.coop/website
Merge pull request 'Make grids reflow on narrow displays' (#75) from benjaoming/website:responsive-grids into new
Reviewed-on: data.coop/website#75
This commit is contained in:
commit
a3e3d6d2d8
|
@ -234,6 +234,11 @@ aside > footer img:hover {
|
|||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
|
||||
@media(max-width: 700px) {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
dt {
|
||||
|
@ -293,6 +298,23 @@ dl.dl-services,
|
|||
.badge-status {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
|
|
Loading…
Reference in a new issue