The repo for Purrform's main BigCommerce store.
fix: update product cards layout and styles for improved responsiveness
+17
-11
-6
assets/scss/custom.scss
-6
assets/scss/custom.scss
···
1257
1257
/************************** Card ************************/
1258
1258
.productGrid {
1259
1259
padding-left: 0;
1260
-
1261
-
.product {
1262
-
@media only screen and (max-width: 800px) {
1263
-
padding: 0;
1264
-
}
1265
-
}
1266
1260
}
1267
1261
1268
1262
/************************** bundle product section ************************/
+4
-1
assets/scss/custom/components/_cards.scss
+4
-1
assets/scss/custom/components/_cards.scss
+11
-3
assets/scss/layouts/products/_productGrid.scss
+11
-3
assets/scss/layouts/products/_productGrid.scss
···
16
16
margin-bottom: spacing('single');
17
17
18
18
.product {
19
-
@include grid-column(6, $float: none);
19
+
@include grid-column(12, $float: none);
20
20
display: inline-block;
21
21
font-size: fontSize('base'); // 1
22
22
vertical-align: top;
23
23
24
24
@include breakpoint('small') {
25
+
width: grid-calc(6, $total-columns);
26
+
}
27
+
28
+
@media (min-width: 900px) {
25
29
width: grid-calc(4, $total-columns);
26
30
}
27
31
28
-
@include breakpoint('medium') {
32
+
@include breakpoint('large') {
29
33
width: grid-calc(3, $total-columns);
30
34
}
31
35
}
···
42
46
.productGrid {
43
47
.product {
44
48
// 1
45
-
@include breakpoint('small') {
49
+
@media (min-width: 900px) {
46
50
width: grid-calc(4, $total-columns);
51
+
}
52
+
53
+
@include breakpoint('large') {
54
+
width: grid-calc(3, $total-columns);
47
55
}
48
56
}
49
57
}