diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 4a31bf8..4c0346f 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,4 +1,10 @@
[class*="html--wrapperQuantity"] {
display: flex;
margin-bottom: 16px;
+
+}
+@media screen and (max-width: 375px) {
+ [class*="html--wrapperQuantity"] {
+ flex-direction: column;
+ }
}
\ No newline at end of file
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
index eee4b67..697b628 100644
--- a/react/components/Pix/Pix.tsx
+++ b/react/components/Pix/Pix.tsx
@@ -23,6 +23,11 @@ const Pix = () => {
// const handles = useCssHandles(CSS_HANDLES)
+ if (typeof document !== "undefined") {
+ const input = document.querySelector(".vtex-address-form-4-x-input");
+ input?.setAttribute("placeholder", "Digite seu CEP");
+ }
+
return (
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 84e0c2d..6f61ddf 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -23,7 +23,8 @@
"breadcrumb#Pdp": {
"props": {
- "blockClass": "Pdp"
+ "blockClass": "Pdp",
+ "showOnMobile": true
}
},
@@ -89,7 +90,6 @@
"phone": 2
},
"infinite": true,
- "showNavigationArrows": "desktopOnly",
"blockClass": "prateleiraSlider"
}
},
@@ -325,7 +325,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
- "phone": "16:9"
+ "phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,
@@ -376,6 +376,7 @@
"children": ["vtex.store-components:product-name"]
},
+
"sku-selector": {
"props": {
"variationsSpacing": 3,
@@ -403,9 +404,7 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
- "marginTop": 4,
- "marginBottom": 7,
- "paddingTop": 7
+ "blockClass": "indisponivelWrapper"
},
"children": [
"flex-layout.col#stack",
@@ -420,9 +419,9 @@
},
"children": [
"flex-layout.row#product-name",
- "product-identifier.product",
- "sku-selector",
- "flex-layout.row#availability"
+ "product-identifier.product#identifierMain",
+ "flex-layout.row#availability",
+ "sku-selector#inverseOrder"
]
},
"flex-layout.row#availability": {
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 2fd4df1..1c7a710 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -37,4 +37,11 @@
padding: 0;
width: 94.44%;
margin: 0 auto;
+ max-width: 94rem;
+}
+@media screen and (max-width: 1024px) {
+ .container--Pdp {
+ width: 100%;
+ padding: 0 40px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 774e386..3cecc56 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@@ -8,7 +9,37 @@
/* Media Query M3 */
/* Grid breakpoints */
.flexRow--productMainWrapper {
- padding: 0 36px;
+ width: 95%;
+ margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+ .flexRow--productMainWrapper {
+ width: 100%;
+ margin: 0;
+ padding: 0 40px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) {
+ padding: 0;
+ }
+}
+
+.flexRow--indisponivelWrapper {
+ width: 95%;
+ margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+ .flexRow--indisponivelWrapper {
+ width: 100%;
+ margin: 0;
+ padding: 0 40px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) {
+ padding: 0;
+ }
}
.flexRow--buyButton {
@@ -17,6 +48,12 @@
width: 100%;
margin-left: 10px;
}
+@media screen and (max-width: 375px) {
+ .flexRow--buyButton {
+ margin-left: 0;
+ padding-top: 10px;
+ }
+}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
height: 49px;
@@ -41,4 +78,133 @@
line-height: 38px;
color: #000000;
margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+ .flexRow--descriptionRow :global(.vtex-store-components-3-x-container) {
+ padding: 0 !important;
+ }
+}
+
+.flexRowContent--productMainWrapper {
+ margin: 16px 0;
+ padding: 0;
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--productMainWrapper {
+ flex-direction: column;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--productMainWrapper .stretchChildrenWidth {
+ width: 100% !important;
+ padding: 0;
+ }
+}
+
+.flexRowContent--indisponivelWrapper {
+ margin: 16px 0;
+ padding: 0;
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--indisponivelWrapper {
+ flex-direction: column;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--indisponivelWrapper .stretchChildrenWidth {
+ width: 100% !important;
+ padding: 0;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .flexRowContent--descriptionRow {
+ flex-direction: column;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--descriptionRow .stretchChildrenWidth {
+ width: 100% !important;
+ padding: 0;
+ }
+}
+.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) {
+ object-fit: unset !important;
+ max-height: 994px !important;
+ margin-bottom: 16px;
+}
+
+.flexRow--message-availability :global(.vtex-store-components-3-x-title) {
+ font-size: 0;
+ margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before {
+ content: "Produto indisponivel";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
+ font-size: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before {
+ content: "Deseja saber quando estiver disponÃvel?";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+ display: grid;
+ grid-auto-flow: column;
+ max-width: 400px;
+ column-gap: 8px;
+}
+@media screen and (max-width: 1024px) {
+ .flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+ width: 100%;
+ }
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child {
+ grid-area: 2/1/2/3;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
+ margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
+ margin: 0;
+ margin-bottom: 15px;
+}
+.flexRow--message-availability :global(.vtex-button) {
+ width: 100%;
+ background-color: #000000;
+ font-size: 0;
+ height: 49px;
+ border-radius: 0;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+.flexRow--message-availability :global(.vtex-button)::before {
+ content: "Avise-me";
+ color: #fff;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+}
+.flexRow--message-availability :global(.vtex-button__label) {
+ display: none;
+}
+.flexRow--message-availability :global(.vtex-input-prefix__group) {
+ border-radius: 0;
+ border-color: #989898;
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 1b5436d..00e2d9f 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -11,6 +11,12 @@
width: 90.63%;
margin: 0 auto 101px auto;
}
+@media screen and (max-width: 1024px) {
+ .sliderLayoutContainer--prateleiraSlider {
+ width: 100% !important;
+ padding: 0 63px;
+ }
+}
.sliderArrows--prateleiraSlider {
margin: 0;
@@ -20,10 +26,20 @@
.sliderRightArrow--prateleiraSlider {
right: -2.53%;
}
+@media screen and (max-width: 1024px) {
+ .sliderRightArrow--prateleiraSlider {
+ right: 3.91%;
+ }
+}
.sliderLeftArrow--prateleiraSlider {
left: -2.53%;
}
+@media screen and (max-width: 1024px) {
+ .sliderLeftArrow--prateleiraSlider {
+ left: 3.91%;
+ }
+}
.paginationDotsContainer--prateleiraSlider {
bottom: -32px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 3850abc..8689d51 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -14,10 +14,16 @@
.productImageTag--ImgsMain--main {
object-fit: unset !important;
}
+@media screen and (max-width: 1024px) {
+ .productImageTag--ImgsMain--main {
+ max-height: 994px !important;
+ }
+}
.productImagesThumb {
width: 13.605% !important;
margin: 0 16px 0 0;
+ max-width: 90px;
}
.productNameContainer--quickview {
@@ -30,6 +36,13 @@
line-height: 34px;
color: #575757;
}
+@media screen and (max-width: 1024px) {
+ .productNameContainer--quickview {
+ justify-content: flex-start;
+ padding-top: 32px;
+ }
+}
+
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
display: flex;
justify-content: end;
@@ -41,6 +54,11 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-product-identifier-0-x-product-identifier--productReference) {
+ justify-content: flex-start;
+ }
+}
.skuSelectorContainer--inverseOrder {
display: flex;
@@ -133,6 +151,29 @@
padding-top: 16.1px;
text-decoration: underline;
}
+@media screen and (max-width: 600px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: 55px;
+ }
+}
+@media screen and (max-width: 490px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: -85px;
+ top: 50px;
+ }
+}
+@media screen and (max-width: 450px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: -112px;
+ top: 50px;
+ }
+}
+@media screen and (max-width: 375px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: -78px;
+ top: 50px;
+ }
+}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: black;
}
@@ -151,6 +192,21 @@
border: none;
border-radius: 0;
}
+@media screen and (max-width: 490px) {
+ .shippingContainer :global(.vtex-button) {
+ right: 31%;
+ }
+}
+@media screen and (max-width: 425px) {
+ .shippingContainer :global(.vtex-button) {
+ right: 24%;
+ }
+}
+@media screen and (max-width: 375px) {
+ .shippingContainer :global(.vtex-button) {
+ right: 40px;
+ }
+}
.shippingContainer :global(.vtex-button) ::before {
content: "Ok";
font-weight: 600;
@@ -240,4 +296,10 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
+}
+
+@media screen and (max-width: 1024px) {
+ .productImagesGallerySlide--ImgsMain {
+ width: 100% !important;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 070233f..cdcf0a4 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -11,11 +11,27 @@
width: 94.44%;
margin: 0 auto;
}
+@media screen and (max-width: 1024px) {
+ .container--descriptionLayout {
+ width: 100%;
+ padding: 0 40px;
+ }
+}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
padding: 0 64px;
margin-bottom: 32px;
+ max-width: 94rem;
+ margin: 0 auto 32px auto;
+}
+@media screen and (max-width: 1024px) {
+ .container--descriptionLayout .listContainer--descriptionButtonWrapper {
+ padding: 16px 0 0 0;
+ flex-direction: column;
+ margin-bottom: 16px;
+ border-top: 1px solid #B9B9B9;
+ }
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
margin: 0;
@@ -28,10 +44,19 @@
font-size: 18px;
line-height: 38px;
}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover {
+ background-color: #fff;
+}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
+@media screen and (max-width: 1024px) {
+ .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
+ margin-bottom: 16px;
+ padding: 0 !important;
+ }
+}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
margin-top: 2px;
}
@@ -46,7 +71,17 @@
font-size: 18px;
line-height: 38px;
}
+@media screen and (max-width: 1024px) {
+ .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
+ border: none;
+ }
+}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
+}
+@media screen and (max-width: 1024px) {
+ .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
+ padding: 0 !important;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 6388af7..f2ebd5b 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -28,4 +28,10 @@
padding: 0;
width: 94.44%;
margin: 0 auto;
+ max-width: 94rem;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ padding: 0 40px;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index ecc6a10..8f7fd7c 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,5 +1,34 @@
.flexRow--productMainWrapper{
- padding: 0 36px;
+ width: 95%;
+ margin: 0 auto;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ margin: 0;
+ padding: 0 40px;
+ }
+ :global(.vtex-store-components-3-x-container){
+
+ @media screen and (max-width: 1024px) {
+ padding: 0;
+ }
+ }
+}
+.flexRow--indisponivelWrapper{
+ width: 95%;
+ margin: 0 auto;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ margin: 0;
+ padding: 0 40px;
+ }
+ :global(.vtex-store-components-3-x-container){
+
+ @media screen and (max-width: 1024px) {
+ padding: 0;
+ }
+ }
}
.flexRow--buyButton{
display: flex;
@@ -7,6 +36,11 @@
width: 100%;
margin-left: 10px;
+ @media screen and (max-width: 375px) {
+ margin-left: 0;
+ padding-top: 10px;
+ }
+
.flexRowContent--buyButton{
margin: 0;
height: 49px;
@@ -33,4 +67,137 @@
line-height: 38px;
color: $color-black2;
margin: 0;
+}
+.flexRow--descriptionRow{
+ :global(.vtex-store-components-3-x-container) {
+
+ @media screen and (max-width: 1024px) {
+ padding: 0 !important;
+ }
+ }
+}
+
+.flexRowContent--productMainWrapper{
+ margin: 16px 0;
+ padding: 0;
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+
+ .stretchChildrenWidth{
+ @media screen and (max-width: 1024px) {
+ width: 100% !important;
+ padding: 0;
+ }
+ }
+}
+.flexRowContent--indisponivelWrapper{
+ margin: 16px 0;
+ padding: 0;
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+
+ .stretchChildrenWidth{
+ @media screen and (max-width: 1024px) {
+ width: 100% !important;
+ padding: 0;
+ }
+ }
+}
+.flexRowContent--descriptionRow{
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+
+ .stretchChildrenWidth {
+ @media screen and (max-width: 1024px) {
+ width: 100% !important;
+ padding: 0;
+ }
+
+ :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){
+ object-fit: unset !important;
+ max-height: 994px !important;
+ margin-bottom: 16px;
+ }
+ }
+}
+
+.flexRow--message-availability{
+ :global(.vtex-store-components-3-x-title){
+ font-size: 0;
+ margin: 0;
+ &::before {
+ content: "Produto indisponivel";
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray17;
+ }
+ }
+ :global(.vtex-store-components-3-x-subscribeLabel){
+ font-size: 0;
+ &::before {
+ content: "Deseja saber quando estiver disponÃvel?";
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray17;
+ }
+ }
+ :global(.vtex-store-components-3-x-content){
+ display: grid;
+ grid-auto-flow: column;
+ max-width: 400px;
+ column-gap: 8px;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ }
+
+ :last-child{
+ grid-area: 2/1/2/3;
+ }
+ :global(.vtex-store-components-3-x-inputEmail){
+ margin: 0;
+ }
+ :global(.vtex-store-components-3-x-inputName){
+ margin: 0;
+ margin-bottom: 15px;
+ }
+ }
+ :global(.vtex-button){
+ width: 100%;
+ background-color: $color-black2;
+ font-size: 0;
+ height: 49px;
+ border-radius: 0;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ &::before {
+ content: "Avise-me";
+ color: $color-white;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ }
+ }
+ :global(.vtex-button__label){
+ display: none;
+ }
+ :global(.vtex-input-prefix__group){
+ border-radius: 0;
+ border-color: $color-gray12;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index d4e4a7b..1f78771 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -25,12 +25,6 @@
.image--prateleiraImg{
min-height: 314px;
- @media screen and (min-width: 1920px) {
-
- }
- @media screen and (max-width: 1024px) {
-
- }
@media screen and (max-width: 1280px) {
min-height: 285px;
}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 33a12df..c8aadb7 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,6 +1,11 @@
.sliderLayoutContainer--prateleiraSlider{
width: 90.63%;
margin: 0 auto 101px auto;
+
+ @media screen and (max-width: 1024px) {
+ width: 100% !important;
+ padding: 0 63px;
+ }
}
.sliderArrows--prateleiraSlider{
margin: 0;
@@ -8,9 +13,17 @@
}
.sliderRightArrow--prateleiraSlider{
right: -2.53%;
+
+ @media screen and (max-width: 1024px) {
+ right: 3.91%;
+ }
}
.sliderLeftArrow--prateleiraSlider{
left: -2.53%;
+
+ @media screen and (max-width: 1024px) {
+ left: 3.91%;
+ }
}
.paginationDotsContainer--prateleiraSlider{
bottom: -32px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 9aae666..e52dc66 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -4,11 +4,16 @@
.productImageTag--ImgsMain--main{
object-fit: unset !important;
+
+ @media screen and (max-width: 1024px) {
+ max-height: 994px !important;
+ }
}
.productImagesThumb{
width: 13.605% !important;
margin: 0 16px 0 0;
+ max-width: 90px;
}
.productNameContainer--quickview{
@@ -21,8 +26,9 @@
line-height: 34px;
color: $color-gray14;
- @media screen and (min-width: 1920px) {
-
+ @media screen and (max-width: 1024px) {
+ justify-content: flex-start;
+ padding-top: 32px;
}
}
@@ -36,6 +42,10 @@
font-size: 14px;
line-height: 19px;
color: $color-gray13;
+
+ @media screen and (max-width: 1024px) {
+ justify-content: flex-start;
+ }
}
.skuSelectorContainer--inverseOrder{
@@ -148,6 +158,22 @@
padding-top: 16.1px;
text-decoration: underline;
+ @media screen and (max-width: 600px) {
+ left: 55px;
+ }
+ @media screen and (max-width: 490px) {
+ left: -85px;
+ top: 50px;
+ }
+ @media screen and (max-width: 450px) {
+ left: -112px;
+ top: 50px;
+ }
+ @media screen and (max-width: 375px) {
+ left: -78px;
+ top: 50px;
+ }
+
:last-child{
color: black;
}
@@ -169,6 +195,16 @@
border: none;
border-radius: 0;
+ @media screen and (max-width: 490px) {
+ right: 31%;
+ }
+ @media screen and (max-width: 425px) {
+ right: 24%;
+ }
+ @media screen and (max-width: 375px) {
+ right: 40px;
+ }
+
::before{
content: "Ok";
font-weight: 600;
@@ -262,4 +298,10 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
+}
+
+.productImagesGallerySlide--ImgsMain{
+ @media screen and (max-width: 1024px) {
+ width: 100% !important;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 61bb40e..d6f4ecd 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -2,11 +2,25 @@
width: 94.44%;
margin: 0 auto;
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ padding: 0 40px;
+ }
+
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
border-bottom: 1px solid $color-gray6;
padding: 0 64px;
margin-bottom: 32px;
+ max-width: 94rem;
+ margin: 0 auto 32px auto;
+
+ @media screen and (max-width: 1024px) {
+ padding: 16px 0 0 0;
+ flex-direction: column;
+ margin-bottom: 16px;
+ border-top: 1px solid $color-gray6;
+ }
.listItem--descriptionButton{
margin: 0;
@@ -18,9 +32,18 @@
font-size: 18px;
line-height: 38px;
}
+ :global(.vtex-button):hover{
+ background-color: $color-white;
+ }
+
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
+
+ @media screen and (max-width: 1024px) {
+ margin-bottom: 16px;
+ padding: 0 !important;
+ }
}
}
.listItemActive--descriptionButton{
@@ -35,10 +58,18 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
+
+ @media screen and (max-width: 1024px) {
+ border: none;
+ }
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
+
+ @media screen and (max-width: 1024px) {
+ padding: 0 !important;
+ }
}
}
}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index c6f85ba..2e4b5ac 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -20,6 +20,7 @@ $color-gray13: rgba(146, 146, 146, 0.48);
$color-gray14: #575757;
$color-gray15: #929292;
$color-gray16: #afafaf;
+$color-gray17: #868686;
$color-blue: #4267b2;