fix: ajusta o width do container da imagem

This commit is contained in:
Leonardo Pereira Rocha 2023-01-31 22:27:22 -03:00
parent 9a4654cf02
commit e64b8a39f8
7 changed files with 23 additions and 65 deletions

View File

@ -46,7 +46,7 @@ Basicamente esse componente
<div class="vtex-flex-layout-0-x-flexRow"> <div class="vtex-flex-layout-0-x-flexRow">
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center"> <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
<div class="vtex-flex-layout-0-x-flexRowContent pr7"> <div class="vtex-flex-layout-0-x-flexRowContent pr7">
<div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;"> <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 44%;">
{children} {children}
</div> </div>
</div> </div>

View File

@ -1,4 +1,9 @@
[dataid*="product-images"] { [dataid*="product-images"] {
display: flex; margin-left: 40px;
justify-content: left; width: 80%;
}
[class*="productImageTag--main"] {
max-width: 80.25%;
object-fit: none;
} }

View File

@ -45,8 +45,6 @@
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
"paddingTop": 7, "paddingTop": 7,
@ -78,7 +76,6 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%",
"rowGap": 0 "rowGap": 0
} }
}, },
@ -88,6 +85,7 @@
}, },
"product-images": { "product-images": {
"props": { "props": {
"contentType": "images",
"showNavigationArrows": false, "showNavigationArrows": false,
"showPaginationDots": false, "showPaginationDots": false,
"thumbnailsOrientation": "horizontal", "thumbnailsOrientation": "horizontal",

View File

@ -1,39 +1,9 @@
.add-to-cart-button { /*
background-color: black; 0 - 600PX: Phone
color: white; 600 - 900px: Table portrait
} 900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
.buttonText { 1800px + : Big desktop
visibility: hidden; */
} /* Media Query M3 */
/* Grid breakpoints */
.__label {
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.buttonText::after {
width: 398px;
height: 25px;
content: "Adicionar à sacola";
visibility: visible;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttonDataContainer {
position: relative;
}
.button-add {
background-color: black;
}

View File

@ -1,5 +0,0 @@
.stretchChildrenWidth {
display: flex;
flex-direction: column;
border: 1px solid red;
}

View File

@ -70,6 +70,10 @@
align-items: flex-end; align-items: flex-end;
} }
.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex {
width: 40%;
}
.flexCol--orderByMobileCol { .flexCol--orderByMobileCol {
width: 42%; width: 42%;
} }
@ -83,7 +87,6 @@
max-height: 100%; max-height: 100%;
} }
.flexColChild--quickviewDetails:first-child { .flexColChild--quickviewDetails:first-child {
overflow-y: auto; overflow-y: auto;
height: 66% !important; height: 66% !important;

View File

@ -9,17 +9,4 @@
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .newsletter {
background: red; background: red;
} }
.productNameContainer {
width: 664px;
height: 34px;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
margin-right: 40px;
}