diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 7c209b0..5058598 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,7 +1,6 @@
[class*="html--pdp-breadcrumb"] {
display: flex;
justify-content: center;
- padding: 0 40px;
}
[class*="html--selling-price"] {
@@ -63,6 +62,10 @@
}
@media (max-width: 1024px) {
+ [class*="html--pdp-breadcrumb"] {
+ padding: 0 40px;
+ }
+
[class*="html--product-quantity"] {
width: 149.91px;
}
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
new file mode 100644
index 0000000..76c6d86
--- /dev/null
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -0,0 +1,13 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
+/* Grid breakpoints */
+.buttonText--addToCart {
+ font-size: 18px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 4494087..47e2ac2 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -10,8 +10,7 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
.container {
- width: 100%;
- max-width: 1920px;
+ width: 94.445%;
}
.termArrow,
@@ -32,6 +31,7 @@
font-size: 16px;
position: absolute;
top: 17%;
+ left: 0;
}
.link--1 {
@@ -58,4 +58,9 @@
.container {
max-width: 1840px;
}
+}
+@media (max-width: 1024px) {
+ .container {
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 59cea53..d1471d8 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -19,4 +19,9 @@
.heading-level-1 {
margin-top: 16px;
}
+}
+@media (max-width: 767px) {
+ .heading-level-1 {
+ font-size: 20px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d540bc9..f54d46b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -161,6 +161,10 @@
height: 49px;
}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+ padding-bottom: 7px;
+}
+
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..2ef776a
--- /dev/null
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -0,0 +1,3 @@
+.buttonText--addToCart {
+ font-size: 18px;
+}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 98f2ef1..d3646c5 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,6 +1,5 @@
.container {
- width: 100%;
- max-width: 1920px;
+ width: 94.445%;
}
.termArrow,
@@ -21,6 +20,7 @@
font-size: 16px;
position: absolute;
top: 17%;
+ left: 0;
}
.link--1 {
@@ -48,3 +48,9 @@
max-width: 1840px;
}
}
+
+@media (max-width: 1024px) {
+ .container {
+ width: 100%;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e4dff0f..57b4ab1 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -10,3 +10,9 @@
margin-top: 16px;
}
}
+
+@media (max-width: 767px) {
+ .heading-level-1 {
+ font-size: 20px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 2d07908..46ab6ce 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -160,6 +160,10 @@
height: 49px;
}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+ padding-bottom: 7px;
+}
+
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;