feat(decription):AJUSTANDO RESPONSIVIDADE

This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-06 00:48:55 -03:00
parent 4e3b6b6537
commit f56a822713
4 changed files with 112 additions and 23 deletions

View File

@ -1,13 +1,6 @@
/* [class*=html--pdp-breadcrumb]{
background: blue;
} */
/* .html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
} */
.html--pdp-section_descriptions{
display: flex;
flex-direction: column;
@ -20,6 +13,15 @@
.html--pdp-descriptions{
display: flex;
}
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
width: 100%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
max-width: 100%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 28px;
}
.html--pdp-departamens{
background: transparent;
margin-top: 32px;
@ -63,6 +65,9 @@
justify-content: end;
padding: 0;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 0px;
}
.html--pdp-departamens div ul li :global(button.open){
border-bottom: none;
}

View File

@ -1,19 +1,15 @@
{
"store.product": {
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"html#departaments",
"flex-layout.row#specifications-title",
"html#carousel"
"html#departaments"
]
},
"html#carousel":{
"children":["flex-layout.row#shelfpdp"]
"html#carousel": {
"children": ["flex-layout.row#shelfpdp"]
},
"flex-layout.row#shelfpdp": {
"props":{
"blockClass":"pdp-carrousel"
"props": {
"blockClass": "pdp-carrousel"
},
"children": ["list-context.product-list#pdp"]
},
@ -39,15 +35,19 @@
"product-summary.shelf#Pdp": {
"children": [
"stack-layout#prodsum",
"stack-layout#pdp",
"product-summary-name",
"product-summary-space",
"product-list-price#summary",
"product-installments#summary",
"flex-layout.row#selling-price-savings"
]
},
"stack-layout#pdp": {
"children": [
"product-summary-image#shelf",
"modal-trigger#quickview" // Check quickview.jsonc
]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -149,6 +149,7 @@
},
"children": ["html#Sections", "html#description"]
},
"html#description": {
"props": {
"tag": "div",
@ -167,6 +168,7 @@
"htmlId": "teste"
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@ -185,6 +187,7 @@
},
"product-images#description": {
"props": {
"maxHeight":872,
"testid": "product-images",
"aspectRatio": {
"desktop": "1:1",

View File

@ -127,7 +127,7 @@
background: white;
margin-right: 1em;
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb {
width: 30% !important;
}
@ -142,7 +142,7 @@
border-radius: 8px;
min-height: 5.54em;
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em;
}
@ -150,4 +150,48 @@
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px;
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer .productImageTag {
min-width: 296px;
}
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 20px !important;
}
}
.productDescriptionContainer .content {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .content {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer .content {
font-size: 14px !important;
line-height: 19px !important;
}
}

View File

@ -120,7 +120,7 @@
width: max-content !important;
background:white;
margin-right: 1em;
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
width: 30% !important;
}
.figure{
@ -130,7 +130,7 @@
.thumbImg{
border-radius: 8px;
min-height: 5.54em;
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
min-height: 4.9em;
}
}
@ -142,4 +142,41 @@
}
}
}
.productDescriptionContainer{
.productImageTag{
@media screen and (max-width: 1024px){
min-width: 296px;
}
}
.productDescriptionTitle{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@media screen and (min-width: 1920px){
font-size: 32px;
}
@media screen and (max-width: 1024px){
font-size: 20px !important;
}
}
.content{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
@media screen and (min-width: 1920px){
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px){
font-size: 14px !important;
line-height: 19px !important;
}
}
}