diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index ff94055..8925940 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -179,12 +179,6 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 color: black; } -[class*="vtex-store-components-3-x-productImageTag--main"] { - width: 904px; - height: 904px; - max-height: 900px !important; -} - [class*="pix-container"] { display: flex; } @@ -218,6 +212,27 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 } -.html--botaoadc-quantidade { - display: flex; + +@media screen and (min-width: 768px) { + .html--botaoadc-quantidade { + display: flex; + } } + + +@media screen and (max-width: 1024px){ + + [class*="vtex-tab-layout-0-x-listItem"]{ + border: none; + width: 100%; + display: flex; + } + + [class*="vtex-tab-layout-0-x-listItemActive"] { + border: none; + width: 100%; + display: flex; + } +} + + diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b071c30..54eb90d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,13 +8,14 @@ /* Media Query M3 */ /* Grid breakpoints */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); -.flexRowContent--btn-product { - margin: 0; +@media screen and (min-width: 768px) { + .flexRowContent--btn-product { + margin: 0 10px; + } } .flexRow--btn-product { width: 100%; - margin: 0 10px; } .flexRow--btn-product :global(.vtex-button) { background-color: black; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index aefd9ab..9fb896a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -198,6 +198,13 @@ width: 50%; margin-left: 16px; } +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + width: 100%; + margin-left: 0; + margin-top: 16px; + } +} .carouselGaleryThumbs { height: 200px; @@ -303,4 +310,10 @@ font-size: 18px; line-height: 25px; text-transform: uppercase; +} + +@media screen and (max-width: 1023px) { + .content--imagem-descricao { + width: 100%; + } } \ 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 9a6460b..e6cd054 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -9,12 +9,18 @@ // } .flexRowContent--btn-product { - margin: 0; + + + @media screen and (min-width: 768px) { + margin: 0 10px; + } } .flexRow--btn-product { width: 100%; - margin: 0 10px; + + + :global(.vtex-button) { background-color: black; @@ -36,3 +42,5 @@ .flexRowContent--container-main { padding: 0 40px; } + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 62346e9..4d9d192 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -221,6 +221,12 @@ .productDescriptionContainer { width: 50%; margin-left: 16px; + + @media screen and (max-width: 1024px) { + width: 100%; + margin-left: 0; + margin-top: 16px; + } } .carouselGaleryThumbs { @@ -350,3 +356,11 @@ } } } + + + +.content--imagem-descricao { + @media screen and (max-width: 1023px) { + width: 100%; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index b92765f..07bd52d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,4 +1,3 @@ - .listContainer { display: flex; justify-content: space-evenly; @@ -16,7 +15,20 @@ flex-direction: row-reverse; @media screen and (max-width: 1024px) { - flex-direction: column-reverse; } } + + +// .productImageTag--main { +// @media screen and (max-width: 1024px){ +// max-height: 1000px !important; +// width: 100%; +// } +// } + +// .swiper-slide { +// @media screen and (max-width: 1024px) { +// display: none; +// } +// }