diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 4a8df70..d0fd5b3 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -27,6 +27,18 @@
[class*="html--productDescription"] {
padding: 0 40px;
+ width: 100%;
+}
+
+[class*="html--shelf"] {
+ display: flex;
+ justify-content: center;
+}
+
+@media (min-width: 1921px) {
+ [class*="html--descriptionImage"] {
+ width: 47.392%;
+ }
}
@media (max-width: 1024px) {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index f24a6f2..00e7240 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -9,7 +9,7 @@
// "product-specification-group#table",
// "shelf.relatedProducts",
"rich-text#shelfTitle",
- "list-context.product-list#shelfProducts",
+ "html#shelf",
"newsletter#pageProduct",
"product-questions-and-answers"
]
@@ -258,6 +258,13 @@
// }
// },
+ "html#shelf": {
+ "props": {
+ "blockClass": "shelf"
+ },
+ "children": ["list-context.product-list#shelfProducts"]
+ },
+
"list-context.product-list#shelfProducts": {
"blocks": ["product-summary.shelf#shelfProducts"],
"children": ["slider-layout#demo-products"]
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index c787889..4494087 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -52,4 +52,10 @@
display: block;
content: "Sandálias";
font-size: 16px;
+}
+
+@media (min-width: 1921px) {
+ .container {
+ max-width: 1840px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 8b17523..b104457 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -133,6 +133,11 @@
padding: 0;
}
+@media (min-width: 1921px) {
+ .flexRowContent--product-container {
+ max-width: 1840px;
+ }
+}
@media (max-width: 1024px) {
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0 40px;
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 594edc1..3a8da6f 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -38,6 +38,12 @@
max-width: 314px !important;
}
+@media (min-width: 1921px) {
+ .image {
+ width: 434.4px;
+ height: 434.4px;
+ }
+}
@media (max-width: 1024px) {
.brandName {
font-size: 14px;
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index d58b060..dfbf40f 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -61,6 +61,15 @@
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}
+@media (min-width: 1921px) {
+ .sliderLayoutContainer--shelf {
+ max-width: 1840px;
+ }
+ .sliderTrackContainer--shelf {
+ width: 100%;
+ max-width: 1840px;
+ }
+}
@media (max-width: 1024px) {
.sliderTrack--shelf {
gap: 12px !important;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d8af38a..2dd0ffa 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -478,6 +478,12 @@
margin: 0;
}
+@media (min-width: 1921px) {
+ .container--pageProduct {
+ width: 100%;
+ max-width: 774px;
+ }
+}
@media (max-width: 1024px) {
.productBrand--quickview {
justify-content: flex-start;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 102cf7d..5fc03aa 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -10,6 +10,10 @@
/* Grid breakpoints */
.container--description {
margin-top: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
}
.contentItem {
@@ -56,6 +60,12 @@
text-transform: capitalize;
}
+@media (min-width: 1921px) {
+ .listContainer,
+ .contentContainer {
+ max-width: 1840px;
+ }
+}
@media (max-width: 1024px) {
.listContainer {
flex-direction: column;
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 5881ba1..98f2ef1 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -42,3 +42,9 @@
content: "Sandálias";
font-size: 16px;
}
+
+@media (min-width: 1921px) {
+ .container {
+ max-width: 1840px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 79d8d4e..8f999cb 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -126,6 +126,12 @@
}
}
+@media (min-width: 1921px) {
+ .flexRowContent--product-container {
+ max-width: 1840px;
+ }
+}
+
@media (max-width: 1024px) {
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0 40px;
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 4f8d227..a98d8da 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -28,6 +28,13 @@
max-width: 314px !important;
}
+@media (min-width: 1921px) {
+ .image {
+ width: 434.4px;
+ height: 434.4px;
+ }
+}
+
@media (max-width: 1024px) {
.brandName {
font-size: 14px;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index d7e1c6a..a844780 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -53,13 +53,16 @@
}
}
-// .slide--shelf--visible {
-// width: 5.1308% !important;
-// }
+@media (min-width: 1921px) {
+ .sliderLayoutContainer--shelf {
+ max-width: 1840px;
+ }
-// .slide--shelf--hidden {
-// visibility: hidden;
-// }
+ .sliderTrackContainer--shelf {
+ width: 100%;
+ max-width: 1840px;
+ }
+}
@media (max-width: 1024px) {
.sliderTrack--shelf {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index eeee669..ce0ac31 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -490,6 +490,13 @@
margin: 0;
}
+@media (min-width: 1921px) {
+ .container--pageProduct {
+ width: 100%;
+ max-width: 774px;
+ }
+}
+
@media (max-width: 1024px) {
.productBrand--quickview {
justify-content: flex-start;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 4014da8..9075fbd 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,5 +1,9 @@
.container--description {
margin-top: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
}
.contentItem {
@@ -46,6 +50,13 @@
text-transform: capitalize;
}
+@media (min-width: 1921px) {
+ .listContainer,
+ .contentContainer {
+ max-width: 1840px;
+ }
+}
+
@media (max-width: 1024px) {
.listContainer {
flex-direction: column;