diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index c99d5dc..a00b23b 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -38,6 +38,12 @@ display: flex; height: 49px; } +@media screen and (max-width: 768px) { + [class*="html--qtd-btn"] { + flex-direction: column; + height: unset; + } +} [class*="html--qtd-btn"] :global(.vtex-button) { background-color: #000000; @@ -49,3 +55,9 @@ color: #ffffff; border-radius: 0%; } +@media screen and (max-width: 768px) { + [class*="html--qtd-btn"] :global(.vtex-button) { + height: 74px; + padding: 0 64px; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 817dd89..83490d9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -68,7 +68,8 @@ "product-description": { "props": { "marginBottom": 7, - "blockClass": "descricao" + "blockClass": "descricao", + "collapseContent": false } }, "condition-layout.product#availability": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ef5baf9..4f88e2d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -38,4 +38,7 @@ .flexRowContent--container-produto { display: block; } + .flexRowContent--container-produto .stretchChildrenWidth { + width: 100% !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 11ace81..1268528 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -48,6 +48,11 @@ height: 100%; /*height: 49px;*/ } +@media screen and (max-width: 768px) { + .quantitySelectorContainer--quantidade { + margin: 0 0 10px 0; + } +} /*.summaryContainer { background-color: blue; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 92b9ecf..d7118c0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -19,6 +19,7 @@ .carouselGaleryThumbs { margin-top: 16px; + display: block; } .thumbImg { @@ -380,9 +381,29 @@ } } +.productDescriptionText--descricao { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media screen and (max-width: 768px) { + .productDescriptionText--descricao { + font-size: 14px; + line-height: 19px; + } +} + .subscriberContainer { position: relative; } +@media screen and (max-width: 1024px) { + .subscriberContainer .content { + display: flex; + width: 100% !important; + max-width: unset; + } +} .subscriberContainer .title { font-size: 0; margin: 0; @@ -443,6 +464,7 @@ border: none; border-radius: 0%; height: 49px; + cursor: pointer; } .subscriberContainer .content .submit :global(.vtex-button__label) { font-size: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 010903c..9e720a0 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -38,6 +38,11 @@ margin: 0; height: 42px; } +@media screen and (max-width: 1024px) { + .listItem { + margin: 5px 0; + } +} .listItem :global(.vtex-button) { background-color: transparent; cursor: pointer; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 35fdc7d..54bdf7c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -24,5 +24,9 @@ gap: 32px; @media screen and (max-width: 1024px) { display: block; + + .stretchChildrenWidth { + width: 100% !important; + } } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 019ef84..30e24ca 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -41,6 +41,9 @@ padding: 0; height: 100%; /*height: 49px;*/ + @media screen and (max-width: 768px) { + margin: 0 0 10px 0; + } } /*.summaryContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 41be173..98d78de 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,6 +10,7 @@ .carouselGaleryThumbs { margin-top: 16px; + display: block; } .thumbImg { @@ -413,10 +414,27 @@ line-height: 19px; } } +.productDescriptionText--descricao { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-gray6; + @media screen and (max-width: 768px) { + font-size: 14px; + line-height: 19px; + } +} //PRODUTO INDISPONIVEL .subscriberContainer { position: relative; + .content { + @media screen and (max-width: 1024px) { + display: flex; + width: 100% !important; + max-width: unset; + } + } .title { font-size: 0; @@ -484,6 +502,7 @@ border: none; border-radius: 0%; height: 49px; + cursor: pointer; } :global(.vtex-button__label) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e79f8e8..4a746b9 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -27,6 +27,9 @@ padding: 0; margin: 0; height: 42px; + @media screen and (max-width: 1024px) { + margin: 5px 0; + } :global(.vtex-button) { background-color: transparent;