tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-23 03:23:42 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pledge List: Fix grid layout for small screens

Browse source
This commit is contained in:
Kelly Dwan 2019-10-28 18:21:26 -04:00
parent ac1027b550
commit 5b5a1d50ff
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
1 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
themes/wporg-5ftf/css/components/_pledge-list.scss
View file

@ -58,24 +58,36 @@ body.archive.post-type-archive-5ftf_pledge {
/* Structure */ /* Structure */
article { article {
display: grid;
grid-template-columns: 330px auto;
margin-bottom: ms(12); margin-bottom: ms(12);
.entry-image { .entry-image {
grid-column: 1; margin-bottom: ms(4);
grid-row: 1 / span 2;
margin-right: ms(8);
} }
.entry-header { @include breakpoint( $breakpoint-small ) {
grid-column: 2; display: grid;
grid-row: 1; grid-template-columns: 200px auto;
.entry-image {
grid-column: 1;
grid-row: 1 / span 2;
margin-bottom: 0;
margin-right: ms(8);
}
.entry-header {
grid-column: 2;
grid-row: 1;
}
.entry-content {
grid-column: 2;
grid-row: 2;
}
} }
.entry-content { @include breakpoint( $breakpoint-tablet ) {
grid-column: 2; grid-template-columns: 330px auto;
grid-row: 2;
} }
} }