Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(description):image description responsiva

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-06 11:17:03 -03:00
parent f56a822713
commit 4229f86c26
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
react/components/Html/styles.css
View File

@ -58,8 +58,23 @@
.html--pdp-productMain :global(.vtex-store-components-3-x-container){ .html--pdp-productMain :global(.vtex-store-components-3-x-container){
max-width: 100%; max-width: 100%;
} }
@media screen and (max-width: 320px){
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 100% !important;
max-height: 100% !important;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 296px;
}
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
align-items: center;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
width: auto;
}
.html--pdp-departamens div ul{ .html--pdp-departamens div ul{
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;

6
styles/css/vtex.store-components.css
View File

@ -152,10 +152,8 @@
width: 90px; width: 90px;
} }
@media screen and (max-width: 1024px) { .productDescriptionContainer {
.productDescriptionContainer .productImageTag { background: pink;
min-width: 296px;
}
} }
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;

6
styles/sass/pages/product/vtex.store-components.scss
View File

@ -143,11 +143,7 @@
} }
} }
.productDescriptionContainer{ .productDescriptionContainer{
.productImageTag{ background: pink;
@media screen and (max-width: 1024px){
min-width: 296px;
}
}
.productDescriptionTitle{ .productDescriptionTitle{
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-style: normal; font-style: normal;