diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cc6c843..0d802e0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -262,6 +262,18 @@ "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] }, + + "slider-layout#demo-products": { + "props": { + "blockClass": "shelf", + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + "newsletter#pageProduct": { "props": { "blockClass": "pageProduct", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 13e2085..d48d387 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -119,6 +119,9 @@ } @media (max-width: 1024px) { + .flexRowContent--product-container { + width: 100%; + } .flexRowContent--product-container .flexRowContent { flex-direction: column; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ef2892a..2d3b657 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -30,6 +30,7 @@ .carouselGaleryThumbs { max-height: 90px; + display: block; } .productImageTag--main { @@ -464,10 +465,16 @@ } @media (max-width: 1024px) { + .container { + padding: 0 40px; + } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .container--pageProduct { + width: 96%; + } .form .content { width: 100%; max-width: 100%; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 87b9233..cbdd8db 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -112,6 +112,7 @@ @media (max-width: 1024px) { .flexRowContent--product-container { + width: 100%; .flexRowContent { flex-direction: column; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fa9c49e..0c2f72c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -19,6 +19,7 @@ .carouselGaleryThumbs { max-height: 90px; + display: block; } .productImageTag--main { @@ -476,11 +477,18 @@ } @media (max-width: 1024px) { + .container { + padding: 0 40px; + } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .container--pageProduct { + width: 96%; + } + .form { .content { width: 100%;