diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index 732dcab..a00c400 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -1,7 +1,30 @@
.html--pdp-breadcrumb {
margin: 0 40px;
+
+}
+
+.html--product-summary-container {
+ margin: 0 40px;
}
+@media screen and (min-width: 1920px) {
+ .html--pdp-breadcrumb {
+ margin: 0 360px;
+
+ }
+
+ .html--product-summary-container {
+ margin: 0 360px;
+ }
+}
+
+
+@media screen and (min-width: 768px) {
+ .html--quantity-and-button {
+ display: flex;
+ }
+
+}
/*buy-button*/
/* [class*="flexRowContent--btn-product"] button {
diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc
index 43ad04e..f9e22eb 100644
--- a/store/blocks/pdp/product-assembly.jsonc
+++ b/store/blocks/pdp/product-assembly.jsonc
@@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
- "children": [
- "assembly-option-item-image"
- ]
+ "children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b6c37c4..ebc66b3 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -125,14 +125,20 @@
"html#product-installments",
"html#Pix",
"html#sku-selector",
- "html#product-quantity",
+ "html#buy-container",
"product-assembly-options",
- "flex-layout.row#buy-button",
"availability-subscriber",
"html#shipping-simulator"
]
},
+ "html#buy-container": {
+ "props": {
+ "blockClass": "quantity-and-button"
+ },
+ "children": ["html#product-quantity", "flex-layout.row#buy-button"]
+ },
+
"html#product-installments": {
"props": {
"testId": "product-installments"
@@ -287,7 +293,8 @@
"html#slider": {
"props": {
- "testId": "product-summary-list"
+ "testId": "product-summary-list",
+ "blockClass": "product-summary-container"
},
"children": ["slider-layout#carrosselatualizado"]
},
@@ -297,7 +304,7 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
- "phone": 1
+ "phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 54bc3fb..dfa6723 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -32,15 +32,15 @@
position: relative;
}
-@media screen and (min-width: 769px) {
- .flexRow--btn-product {
- width: 100%;
- max-width: 526px;
- position: absolute;
- top: 374px;
- left: 158px;
+@media screen and (min-width: 768px) {
+ .flexRowContent--btn-product {
+ margin: 0 10px;
}
}
+
+.flexRow--btn-product {
+ width: 100%;
+}
.flexRow--btn-product :global(.vtex-button) {
background-color: black;
border: 1px solid black;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8bdc6b8..c35730b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -27,7 +27,7 @@
/* carouselThumbs*/
.carouselGaleryThumbs {
- height: 200px;
+ height: 140px;
margin-top: 16px;
}
.carouselGaleryThumbs .productImagesThumb {
@@ -267,6 +267,12 @@
line-height: 32px;
color: #575757;
}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 32px;
+ line-height: 32px;
+ }
+}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
@@ -275,6 +281,12 @@
line-height: 19px;
color: #929292;
}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionText {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
@media screen and (max-width: 1024px) {
.productDescriptionContainer {
margin-top: 16px;
@@ -322,7 +334,12 @@
margin: 16px;
}
.newsletter .inputGroup {
- width: 774px;
+ display: flex;
+}
+@media screen and (min-width: 768px) {
+ .newsletter .inputGroup {
+ width: 774px;
+ }
}
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
border: none;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 9402e34..4dd8dc1 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -15,6 +15,11 @@
margin: auto;
width: 95%;
}
+@media screen and (min-width: 1920px) {
+ .listContainer {
+ width: 75%;
+ }
+}
@media screen and (max-width: 1024px) {
.listContainer {
flex-direction: column;
@@ -26,6 +31,11 @@
display: flex;
padding: 62px 52px;
}
+@media screen and (min-width: 1920px) {
+ .contentItem {
+ padding: 62px 360px;
+ }
+}
@media screen and (max-width: 1024px) {
.contentItem {
flex-direction: column;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 04b5f20..5baf2f9 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -27,14 +27,13 @@
position: relative;
}
-.flexRow--btn-product {
- @media screen and (min-width: 769px) {
- width: 100%;
- max-width: 526px;
- position: absolute;
- top: 374px;
- left: 158px;
+.flexRowContent--btn-product {
+ @media screen and (min-width: 768px) {
+ margin: 0 10px;
}
+}
+.flexRow--btn-product {
+ width: 100%;
:global(.vtex-button) {
background-color: black;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index f8974d9..41763a1 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -15,7 +15,7 @@
/* carouselThumbs*/
.carouselGaleryThumbs {
- height: 200px;
+ height: 140px;
margin-top: 16px;
.productImagesThumb {
@@ -296,6 +296,11 @@
line-height: 32px;
color: $color-gray6;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 32px;
+ line-height: 32px;
+ }
}
.productDescriptionText {
@@ -306,6 +311,11 @@
line-height: 19px;
color: $color-gray8;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
}
@media screen and (max-width: 1024px) {
@@ -361,7 +371,10 @@
}
.inputGroup {
- width: 774px;
+ display: flex;
+ @media screen and (min-width: 768px) {
+ width: 774px;
+ }
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid gray;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 1696228..607c713 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -5,6 +5,9 @@
margin: auto;
width: 95%;
+ @media screen and (min-width: 1920px) {
+ width: 75%;
+ }
@media screen and (max-width: 1024px) {
flex-direction: column;
border-top: 1px solid #b9b9b9;
@@ -15,6 +18,10 @@
display: flex;
padding: 62px 52px;
+ @media screen and (min-width: 1920px) {
+ padding: 62px 360px;
+ }
+
@media screen and (max-width: 1024px) {
flex-direction: column;
padding: 16px 40px;