Fix square sizing for desktop

This commit is contained in:
mDuo13
2020-09-14 14:22:33 -07:00
parent 8e6173b2e4
commit 80aaafca20
4 changed files with 31 additions and 29 deletions

View File

@@ -114,29 +114,6 @@ td:nth-child(1) {
.card {
background-color: transparent;
}
.square {
position: relative;
flex-basis: calc(50% - 30px); // Mobile
margin: 15px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 8px;
&::before {
content: '';
display: block;
padding-top: 100%;
}
&-50 {
flex-basis: calc(50% - 30px);
@include media-breakpoint-up(lg) {
flex-basis: calc(50% - 30px);
}
}
}
.card-wrapper {
width: 100%;

View File

@@ -20,6 +20,35 @@ section {
}
}
// Square blocks ---------------------------------------------------------------
.square {
position: relative;
flex-basis: calc(50% - 30px); // Mobile
margin: 15px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 8px;
&::before {
content: '';
display: block;
padding-top: 100%;
}
@include media-breakpoint-up(lg) {
flex-basis: calc(25% - 30px);
}
&-50 {
flex-basis: calc(50% - 30px);
@include media-breakpoint-up(lg) {
flex-basis: calc(50% - 30px);
}
}
}
// Card Grid styles ------------------------------------------------------------
@@ -156,10 +185,6 @@ section {
min-height: 700px;
}
// .row {
// margin: 0 -1px;
// }
.doc-index {
padding: 48px 0;