Triplehx3/contentdb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use flexbox for responsive package grid

Browse Source
This commit is contained in:
Sam Walker
2018-05-11 11:39:58 +01:00
committed by rubenwardy
parent 5e44f3d64c
commit 7aec5368d8
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/scss/packagegrid.scss
View File

@@ -1,26 +1,32 @@
.packagegrid {
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
padding: 0;
margin: 0;
}
.packagegrid li {
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
flex: 1;
display: block;
min-width: 246px;
min-height: 164px;
padding: 1;
margin: 5px;
}
.packagegrid a {
display: block;
width: 246px;
height: 164px;
padding-bottom: 66.66%;
border-radius: 7px;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}