diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 62c7aef..bb1054e 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -3,6 +3,13 @@
gap: 10px;
+}
+@media (max-width: 768px) {
+ [class*="html--quantity-button-buy"] {
+ flex-direction: column;
+ }
+
+
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d2ed01e..07cc5ea 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -33,6 +33,14 @@
margin: 0;
margin-left: 10px;
}
+@media only screen and (max-width: 767px) {
+ .flexRow--size-buy-button {
+ margin: 0 0 16px 0;
+ }
+ .flexRow--size-buy-button .stretchChildrenWidth {
+ height: 74px;
+ }
+}
.flexRow--size-buy-button .flexRowContent--size-buy-button {
height: 49px;
width: 100%;
@@ -45,11 +53,6 @@
border-radius: 0;
width: 100%;
}
-@media only screen and (max-width: 1024px) {
- .flexRowContent--size-buy-button :global(.vtex-button) {
- width: 780px;
- }
-}
@media only screen and (max-width: 1024px) {
.flexRowContent--description {
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 2332491..a987d99 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -20,6 +20,11 @@
width: 128px;
height: 49px;
}
+@media only screen and (max-width: 767px) {
+ .quantitySelectorContainer {
+ margin-bottom: 0;
+ }
+}
.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
height: 49px;
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 87eace8..da62c8b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -35,6 +35,7 @@
}
.container .carouselGaleryThumbs {
gap: 16px;
+ display: block !important;
}
.container .carouselGaleryThumbs .productImagesThumb {
max-width: 90px;
@@ -50,11 +51,6 @@
justify-content: flex-start;
}
}
-@media only screen and (max-width: 375px) {
- .container .carouselGaleryThumbs {
- display: block;
- }
-}
.skuSelectorContainer {
display: flex;
@@ -192,6 +188,11 @@
margin-bottom: 16px;
}
}
+@media only screen and (max-width: 767px) {
+ .shippingContainer {
+ padding-top: 16px;
+ }
+}
.shippingTable {
border: none;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 895a919..e664817 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -25,6 +25,14 @@
// quantity
.flexRow--size-buy-button{
+
+ @include mq (sm, max) {
+ margin: 0 0 16px 0 ;
+
+ .stretchChildrenWidth{
+ height: 74px;
+ }
+ }
width: 100%;
height: 49px;
margin: 0;
@@ -34,6 +42,8 @@ margin-left: 10px;
width: 100%;
margin: 0;
}
+
+
}
@@ -42,9 +52,9 @@ margin-left: 10px;
border: none;
border-radius: 0;
width: 100%;
- @include mq (md, max) {
- width: 780px;
- }
+ // @include mq (md, max) {
+ // width: 780px;
+ // }
}
.flexRowContent--description{
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index e9320bd..0c64fcd 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -9,7 +9,9 @@
.quantitySelectorContainer{
width: 128px;
height: 49px;
-
+ @include mq (sm, max) {
+ margin-bottom: 0;
+ }
:global(.vtex-numeric-stepper-container){
height: 49px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 33b7094..fbda4d6 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -4,6 +4,7 @@
max-width: 100%;
padding-left: 40px;
padding-right: 40px;
+
@include mq (md, max) {
padding: 0;
}
@@ -29,35 +30,35 @@
.carouselGaleryThumbs {
-gap: 16px;
- .productImagesThumb{
+ gap: 16px;
+ display: block !important;
+
+
+
+ .productImagesThumb {
max-width: 90px;
width: 100%;
margin-right: 16px;
}
+
.thumbImg {
border-radius: 9px;
height: 90px;
}
+
+
}
@include mq (md, max) {
.productNameContainer {
justify-content: flex-start;
-
}
-
-
- }
- @include mq (sm, max) {
- .carouselGaleryThumbs{
-display: block;
- }
}
+
}
// sku-selector
@@ -281,12 +282,11 @@ display: block;
margin-bottom: 16px;
+ }
-
-
- }
-
-
+ @include mq (sm, max) {
+ padding-top: 16px;
+ }
}
.shippingTable {
@@ -299,9 +299,9 @@ display: block;
font-weight: 400 !important;
text-transform: uppercase;
- .shippingTableLabel{
+ .shippingTableLabel {
color: $color-gray9;
- font-weight: 400 ;
+ font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
@@ -311,7 +311,7 @@ display: block;
padding: 0;
display: flex;
color: $color-gray9;
- font-weight: 400 ;
+ font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
@@ -323,7 +323,7 @@ display: block;
.shippingTableHead {
display: flex;
-padding-bottom: 15px;
+ padding-bottom: 15px;
.shippingTableRow {
position: relative;
@@ -366,17 +366,17 @@ padding-bottom: 15px;
width: 100px;
}
- .shippingTableCellDeliveryEstimate {
+ .shippingTableCellDeliveryEstimate {
display: flex;
order: 2;
margin-left: 66px;
}
- .shippingTableCellDeliveryPrice{
+ .shippingTableCellDeliveryPrice {
margin-left: 58px;
}
}
-}
+ }
}
@@ -419,6 +419,7 @@ padding-bottom: 15px;
.inputName {
grid-area: nome;
+
@include mq (md, max) {
margin-bottom: 0;
}
@@ -427,6 +428,7 @@ padding-bottom: 15px;
.inputEmail {
grid-area: email;
+
@include mq (md, max) {
margin-bottom: 0;
}
@@ -469,6 +471,7 @@ padding-bottom: 15px;
line-height: 32px;
font-family: $font-open;
padding-left: 32px;
+
@include mq (md, max) {
padding-left: 0;
padding-top: 16px;
@@ -487,9 +490,10 @@ padding-bottom: 15px;
color: $color-gray6;
padding-left: 32px;
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
+
@include mq (md, max) {
padding: 0px 21px 0px 0;
- // border-bottom: 1px solid $color-gray7;
+ // border-bottom: 1px solid $color-gray7;
@@ -502,5 +506,3 @@ padding-bottom: 15px;
}
// tab-descrição-fim
-
-
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 4602603..0f27e3e 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -22,7 +22,7 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
- sm: 376px,
+ sm: 768px,
md: 1025px,
lg: 1920px,
xl: 1921px