merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive layouts

This commit is contained in:
prashant-webkul 2018-10-01 14:49:11 +05:30
parent 860d55bc38
commit 6618d6a7e0
3 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -7,8 +7,10 @@
//main store front layouting
.main-container-wrapper {
max-width: 1170px;
max-width: 1300px;
width: auto;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
@ -16,22 +18,6 @@
display: block;
}
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.product-list {
.product-card {
width: 100%;

36
packages/Webkul/Shop/src/Resources/assets/sass/components.scss vendored
View File

@ -1,4 +1,39 @@
// product card, requires no changes for responsiveness.
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 45px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 30% 30% 30%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 550px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
.addtocart {
font-size: 0.71rem;
}
}
.product-card {
.product-image {
@ -46,6 +81,7 @@
display: inline-flex;
width: 100%;
align-items: center;
justify-content: space-between;
.addtocart {
border-radius: 0px;

56
public/themes/default/assets/css/shop.css vendored
View File

@ -189,6 +189,39 @@ body {
margin-top: 90px;
}
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 45px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 30% 30% 30%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 550px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
.addtocart {
font-size: 0.71rem;
}
}
.product-card .product-image {
max-height: 350px;
max-width: 280px;
@ -238,6 +271,9 @@ body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.product-card .cart-fav-seg .addtocart {
@ -351,8 +387,10 @@ body {
}
.main-container-wrapper {
max-width: 1170px;
max-width: 1300px;
width: auto;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
@ -361,22 +399,6 @@ body {
display: block;
}
.main-container-wrapper .product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.main-container-wrapper .product-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
grid-column-gap: 27px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
.main-container-wrapper .product-list .product-card {
width: 100%;
display: inline-block;