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;