diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c85f564..1706b60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -312,7 +312,7 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, + "tablet": 3, "phone": 1 }, "infinite": true, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c807690..c59897a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,6 +9,19 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ +.flexRow { + margin: 0 40px; +} + +:global(.vtex-stack-layout-0-x-stackItem) .flexRow { + margin: 0; +} + +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} + .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 55f8050..ff19d1c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,19 +13,10 @@ margin: 0 0 0 0 !important; } -.productImageTag { +.carouselContainer .productImageTag { max-height: none !important; } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} - .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d63cf56..79c6c7f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,7 +9,7 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4108e84..3d2f750 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,15 @@ +.flexRow { + margin: 0 40px; +} +:global(.vtex-stack-layout-0-x-stackItem) { + .flexRow { + margin: 0; + } +} +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 756b124..828efdc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,18 +3,12 @@ margin: 0 0 0 0 !important; } -.productImageTag { - max-height: none !important; +.carouselContainer { + .productImageTag { + max-height: none !important; + } } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e91615b..d7ad334 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,5 @@ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { display: flex;