diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index f3463a8..944866e 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -17,3 +17,14 @@
width: 100%;
}
}
+
+@media only screen and (max-width: 768px) {
+ [class*="html--buy-button"] {
+ flex-direction: column;
+ margin-bottom: 16px;
+ }
+
+ [class*="html--buy-button"] :global(.vtex-button) {
+ height: 74px;
+ }
+}
diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx
index ce55d3f..6aff3ed 100644
--- a/react/components/Pix-bloco/Pix.tsx
+++ b/react/components/Pix-bloco/Pix.tsx
@@ -29,7 +29,7 @@ const Pix = () => {
-
R${totalValue.toFixed(2)}
+
R${totalValue.toFixed(2).replace(".", ",")}
10 % de desconto
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index de19421..6b102dd 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -43,6 +43,11 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
}
+@media only screen and (max-width: 1025px) {
+ :global(.vtex-flex-layout-0-x-flexCol--image-description) {
+ padding-right: 0;
+ }
+}
@media only screen and (max-width: 1025px) {
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 5f0389d..06b8643 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -6,7 +6,12 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
/* Grid breakpoints */
-.numeric-stepper__input {
- background: black;
+@media only screen and (max-width: 767px) {
+ .quantitySelectorContainer {
+ margin-bottom: 0;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index cf24fad..f1c2740 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -16,6 +16,12 @@
max-height: unset;
max-width: 314px;
}
+@media only screen and (max-width: 1025px) {
+ .imageNormal {
+ height: 291.2px;
+ max-width: 291.2px;
+ }
+}
.brandName {
font-weight: 400;
@@ -23,6 +29,12 @@
line-height: 25px;
color: #000000;
}
+@media only screen and (max-width: 1025px) {
+ .brandName {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
.nameContainer {
padding: 16px 0 8px 0;
@@ -37,6 +49,12 @@
line-height: 19px;
color: #bababa;
}
+@media only screen and (max-width: 1025px) {
+ .priceContainer .listPriceContainer {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
.priceContainer .listPriceContainer::after {
content: "por";
}
@@ -55,6 +73,12 @@
line-height: 33px;
color: #000000;
}
+@media only screen and (max-width: 1025px) {
+ .priceContainer .price_sellingPrice {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
.priceContainer .sellingPriceContainer {
padding: 0 0 32px 0;
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 882850c..238f3ad 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -468,6 +468,7 @@
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionTitle {
+ font-size: 20px;
padding-top: 16px;
}
}
@@ -485,6 +486,8 @@
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionText {
+ font-size: 14px;
+ line-height: 19px;
border-bottom: 1px solid #bfbfbf;
padding-bottom: 16px;
}
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 4e3fcbb..e86e4af 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -24,6 +24,12 @@
padding: 16px 0 32px 0;
color: #575757;
}
+@media only screen and (max-width: 1025px) {
+ .container--structure::after {
+ font-size: 20px;
+ line-height: 32px;
+ }
+}
.contentContainer {
padding: 0 32px;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index edf6b53..82b2f97 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -29,6 +29,10 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
+
+ @include mq(md, max) {
+ padding-right: 0;
+ }
}
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..d243d3f
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,5 @@
+.quantitySelectorContainer {
+ @include mq(sm, max) {
+ margin-bottom: 0;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 0a03754..a8ac20e 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -3,6 +3,11 @@
height: 314px;
max-height: unset;
max-width: 314px;
+
+ @include mq(md, max) {
+ height: 291.2px;
+ max-width: 291.2px;
+ }
}
.brandName {
@@ -11,6 +16,11 @@
line-height: 25px;
color: $black;
+
+ @include mq(md, max) {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
.nameContainer {
@@ -27,6 +37,11 @@
color: $gray-700;
+ @include mq(md, max) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+
&::after {
content: "por";
}
@@ -50,6 +65,11 @@
line-height: 33px;
color: $black;
+
+ @include mq(md, max) {
+ font-size: 18px;
+ line-height: 25px;
+ }
}
.sellingPriceContainer {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 6643104..1b8ba22 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -561,6 +561,7 @@ margin-top: 16px;
}
@include mq(md, max) {
+ font-size: 20px;
padding-top: 16px;
}
}
@@ -578,6 +579,8 @@ margin-top: 16px;
}
@include mq(md, max) {
+ font-size: 14px;
+ line-height: 19px;
border-bottom: 1px solid $gray-400;
padding-bottom: 16px;
}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 4d8c9f4..e641240 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -11,6 +11,11 @@
padding: 16px 0 32px 0;
color: $gray-100;
+
+ @include mq(md, max) {
+ font-size: 20px;
+ line-height: 32px;
+ }
}
}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 7670dd6..3c6ea2e 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -34,7 +34,7 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
- mobile: 768px,
+ sm: 768px,
md: 1026px,
xl: 1920px
) !default;