diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 2cef6d9..6384192 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -14,12 +14,17 @@
[class*="description-container"] {
display: flex;
+ gap: 32px;
}
[class*="add-to-cart-button"] {
width: 100%;
}
+[class*="html--product-summary"] {
+ padding: 0 40px;
+}
+
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
@@ -27,6 +32,7 @@
[class*="description-container"] {
flex-direction: column;
+ gap: 0;
}
}
@@ -44,3 +50,9 @@
padding-bottom: 8px;
}
}
+
+@media only screen and (min-width: 1920px) {
+ [class*="html--product-summary"] {
+ padding: 0 360px;
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index e59db9b..999c3ec 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -355,7 +355,8 @@
"html#slider": {
"props": {
- "testId": "product-summary-list"
+ "testId": "product-summary-list",
+ "blockClass": "product-summary"
},
"children": [
"slider-layout#carousel"
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 7ba6a2a..697e686 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,6 +13,11 @@
.container {
padding: 0 40px 16px;
}
+@media only screen and (min-width: 1920px) {
+ .container {
+ padding: 0 360px 16px;
+ }
+}
.homeIcon,
.homeLink {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 722e326..9898f0c 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -21,7 +21,7 @@
padding: 0 !important;
margin: 0;
width: 100% !important;
- max-width: 664px !important;
+ max-width: unset !important;
}
@media only screen and (max-width: 1025px) {
.stretchChildrenWidth {
@@ -37,6 +37,11 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px;
}
+@media only screen and (min-width: 1920px) {
+ :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
+ padding: 0 360px;
+ }
+}
:global(.vtex-flex-layout-0-x-flexRowContent) {
padding: 0;
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 1d34f91..0e7e548 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -15,6 +15,7 @@
height: 314px;
max-height: unset;
max-width: 314px;
+ object-fit: contain;
}
@media only screen and (max-width: 1025px) {
.imageNormal {
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index d1c8ac2..6e813b8 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -12,16 +12,16 @@
/* Grid breakpoints */
.sliderLayoutContainer {
margin-bottom: 64px;
- padding: 0 67px;
+ padding: 0 16px;
}
@media only screen and (max-width: 1025px) {
.sliderLayoutContainer {
- padding: 0 63px;
+ padding: 0 12px;
}
}
@media only screen and (max-width: 767px) {
.sliderLayoutContainer {
- padding: 0 59px;
+ padding: 0 8px;
margin-bottom: 32px;
}
}
@@ -56,33 +56,25 @@
.sliderRightArrow {
visibility: hidden;
+ padding: 0;
+ margin: 0;
}
.sliderRightArrow::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
- padding: 0 40px 0 0;
-}
-@media only screen and (max-width: 767px) {
- .sliderRightArrow::after {
- padding: 0 48px 0 0;
- }
}
.sliderLeftArrow {
visibility: hidden;
+ padding: 0;
+ margin: 0;
}
.sliderLeftArrow::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
- padding: 0 0 0 40px;
}
@media only screen and (max-width: 1025px) {
.sliderLeftArrow::before {
display: block;
}
-}
-@media only screen and (max-width: 767px) {
- .sliderLeftArrow::before {
- padding: 0 0 0 48px;
- }
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 3688634..2ad95ba 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,6 +13,8 @@
/* Grid breakpoints */
.container {
padding: 0;
+ max-width: 100% !important;
+ width: 100%;
}
@media only screen and (min-width: 1920px) {
.container {
@@ -72,9 +74,9 @@
.productImage .productImageTag {
width: 100% !important;
height: 100%;
- max-height: 664px !important;
+ max-height: unset !important;
object-fit: contain;
- max-width: 664px !important;
+ max-width: 100% !important;
}
@media only screen and (max-width: 1025px) {
.productImage .productImageTag {
@@ -84,7 +86,7 @@
}
.productImagesGallerySlide {
- max-width: 664px !important;
+ max-width: 100% !important;
width: 100% !important;
}
@media only screen and (max-width: 1025px) {
@@ -238,7 +240,7 @@
}
.productImageTag {
- max-width: 664px;
+ max-width: 100%;
}
@media only screen and (max-width: 1025px) {
.productImageTag {
@@ -560,7 +562,6 @@
.productDescriptionContainer {
width: 100%;
- padding-left: 32px;
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer {
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 9db8182..1b96dcc 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -14,6 +14,11 @@
.container--structure {
padding: 0 40px;
}
+@media only screen and (min-width: 1920px) {
+ .container--structure {
+ padding: 0 360px;
+ }
+}
.container--structure::after {
content: "Você também pode gostar:";
display: block;
@@ -31,8 +36,8 @@
}
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important;
- max-height: 632px !important;
- max-width: 632px !important;
+ max-height: 100% !important;
+ max-width: 100% !important;
}
@media only screen and (max-width: 1025px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
@@ -108,7 +113,7 @@
@media only screen and (min-width: 1920px) {
.listContainer .listItem :global(.vtex-button__label) {
font-size: 24px;
- line-height: 24px;
+ line-height: 26px;
}
}
@media only screen and (max-width: 1025px) {
@@ -118,7 +123,7 @@
height: fit-content;
padding: 0 !important;
font-size: 18px;
- line-height: 18px;
+ line-height: 38px;
}
}
@media only screen and (max-width: 1025px) {
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 378f809..b5caa69 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,5 +1,9 @@
.container {
padding: 0 40px 16px ;
+
+ @include mq(xl, min) {
+ padding: 0 360px 16px;
+ }
}
.homeIcon,
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index a6db590..61d7ea8 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -9,7 +9,7 @@
padding: 0 !important;
margin: 0;
width: 100% !important;
- max-width: 664px !important;
+ max-width: unset !important;
@include mq(md, max) {
max-width: unset !important;
@@ -23,6 +23,10 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px;
+
+ @include mq(xl, min) {
+ padding: 0 360px;
+ }
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 63b4fbb..23edb64 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -1,8 +1,14 @@
+// .imageContainer {
+// width: 314px;
+// height: 314px;
+// }
+
.imageNormal {
width: 105%;
height: 314px;
max-height: unset;
max-width: 314px;
+ object-fit: contain;
@include mq(md, max) {
height: 291.2px;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 1312782..9cd6442 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,13 +1,13 @@
.sliderLayoutContainer {
margin-bottom: 64px;
- padding: 0 67px;
+ padding: 0 16px;
@include mq(md, max) {
- padding: 0 63px;
+ padding: 0 12px;
}
@include mq(sm, max) {
- padding: 0 59px;
+ padding: 0 8px;
margin-bottom: 32px;
}
@@ -44,32 +44,36 @@
.sliderRightArrow {
visibility: hidden;
+ padding: 0;
+ margin: 0;
&::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
- padding: 0 40px 0 0;
- @include mq(sm, max) {
- padding: 0 48px 0 0;
- }
+
+ // @include mq(sm, max) {
+ // padding: 0 48px 0 0;
+ // }
}
}
.sliderLeftArrow {
-visibility: hidden;
+ visibility: hidden;
+ padding: 0;
+ margin: 0;
&::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
- padding: 0 0 0 40px;
+
@include mq(md, max) {
display: block;
}
- @include mq(sm, max) {
- padding: 0 0 0 48px;
- }
+ // @include mq(sm, max) {
+ // padding: 0 0 0 48px;
+ // }
}
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 3ce4f72..e0cc20d 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,5 +1,7 @@
.container {
padding: 0;
+ max-width: 100% !important;
+ width: 100%;
@include mq(xl, min) {
margin: 0 !important;
@@ -64,22 +66,19 @@
.productImageTag {
width: 100% !important;
height: 100%;
- max-height: 664px !important;
+ max-height: unset !important;
object-fit: contain;
- max-width: 664px !important;
+ max-width: 100% !important;
@include mq(md, max) {
max-height: 100% !important;
max-width: 100% !important;
}
-
- // width: unset !important;
- // max-height: unset !important;
}
}
.productImagesGallerySlide {
- max-width: 664px !important;
+ max-width: 100% !important;
width: 100% !important;
@include mq(md, max) {
@@ -269,7 +268,7 @@
}
.productImageTag {
- max-width: 664px;
+ max-width: 100%;
@include mq(md, max) {
max-width: 100%;
@@ -657,7 +656,6 @@
// DESCRIÇÃO
.productDescriptionContainer {
width: 100%;
- padding-left: 32px;
@include mq(md, max) {
padding-left: 0;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 199df68..634e43b 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,6 +1,10 @@
.container--structure {
padding: 0 40px;
+ @include mq(xl, min) {
+ padding: 0 360px;
+ }
+
&::after {
content: "Você também pode gostar:";
display: block;
@@ -19,8 +23,8 @@
:global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important;
- max-height: 632px !important;
- max-width: 632px !important;
+ max-height: 100% !important;
+ max-width: 100% !important;
@include mq(md, max) {
max-width: unset !important;
@@ -92,7 +96,7 @@
@include mq(xl, min) {
font-size: 24px;
- line-height: 24px;
+ line-height: 26px;
}
@include mq(md, max) {
@@ -101,7 +105,7 @@
height: fit-content;
padding: 0 !important;
font-size: 18px;
- line-height: 18px;
+ line-height: 38px;
}
}
}