Rafael_Sampaio_de_Oliveira/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ajusta alinhamento galeria

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-10-11 19:18:31 -03:00
parent 539f92dbff
commit 0902fd9386
1 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
assets/styles/styles.css
View File

@ -207,6 +207,52 @@ header {
display: none; display: none;
} }
@media (min-width: 1920px) {
.top-cards-container {
display: flex;
}
.bottom-cards-container {
display: flex;
}
}
@media (min-width: 1623px) and (max-width: 1912px) {
.top-cards-container {
width: 75%;
}
}
@media (min-width: 1264px) and (max-width: 1622px) {
.top-cards-container {
width: 90%;
}
}
@media (min-width: 600px) and (max-width: 1123px) {
.bottom-ifocard-desktop-container div {
width: 75%;
}
}
@media (min-width: 415px) and (max-width: 599px) {
.gallery-container {
grid-template-columns: repeat(auto-fill, minmax(94%, 1fr));
}
.gallery-container img {
width: 94%;
}
.bottom-cards-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.bottom-ifocard-desktop-container div {
width: 85%;
}
}
@media (max-width: 414px) { @media (max-width: 414px) {
.banner-desktop { .banner-desktop {
display: none; display: none;
@ -300,59 +346,6 @@ header {
} }
} }
@media (min-width: 1920px) {
.top-cards-container {
display: flex;
}
.bottom-cards-container {
display: flex;
}
}
@media (min-width: 1623px) and (max-width: 1912px) {
.top-cards-container {
width: 75%;
}
}
@media (min-width: 1264px) and (max-width: 1622px) {
.top-cards-container {
width: 90%;
}
}
@media (min-width: 600px) and (max-width: 1241px) {
.image03 {
position: relative;
left: 54%;
}
}
@media (min-width: 600px) and (max-width: 1123px) {
.bottom-ifocard-desktop-container div {
width: 75%;
}
}
@media (min-width: 415px) and (max-width: 599px) {
.gallery-container {
grid-template-columns: repeat(auto-fill, minmax(94%, 1fr));
}
.gallery-container img {
width: 94%;
}
.bottom-cards-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.bottom-ifocard-desktop-container div {
width: 85%;
}
}
@media (min-width: 350px) and (max-width: 380px) { @media (min-width: 350px) and (max-width: 380px) {
.top-cards-container { .top-cards-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));