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

Acabou meu tempo, nao consegui arrumar o responsivo 100%

Browse Source
This commit is contained in:
Izabela Balizardo 2022-10-13 23:19:48 -03:00
parent f96c759091
commit 5e2733e295
2 changed files with 270 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
assets/styles/main.css
View File

@ -214,6 +214,46 @@ body {
color: #bdbdbd; color: #bdbdbd;
} }
@media screen and (max-width: 414px) {
.footer-texto {
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 415px) {
.middle-banner-mobile {
display: none;
}
}
.middle-banner-img-mobile-3{
max-width: 372px;
}
.middle-banner-mobile1{
display: flex;
gap: 14px;
}
.middle-banner-img-mobile{
max-width: 177px;
display: block;
}
@media screen and (max-width:414px){
.main-banner-desktop,
.middle-banner-desktop {
display: none;
}
}
@media screen and (max-width: 412px) { @media screen and (max-width: 412px) {
.top-infocard-subtitulo { .top-infocard-subtitulo {
font-size: 20px; font-size: 20px;
@ -224,14 +264,26 @@ body {
} }
.top-infocard-paragrafo { .top-infocard-paragrafo {
font-size: 16px; font-size: 17px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 0 30px; padding: 0 32px;
} }
.middle-banners { .middle-banners {
height: 484px; height: 484px;
}
.middle-banner-mobile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
max-width: 368px;
margin: 0 auto;
} }
} }
@ -243,7 +295,6 @@ body {
.bottom-infocard-flex { .bottom-infocard-flex {
flex-direction: column; flex-direction: column;
} }
.bottom-infocard-img-mobile { .bottom-infocard-img-mobile {
@ -252,15 +303,13 @@ body {
} }
@media screen and (min-width: 415px) { @media screen and (min-width: 415px) {
.main-banner-mobile,
.bottom-infocard-img-mobile { .bottom-infocard-img-mobile {
display: none; display: none;
} }
} }
@media screen and (max-width: 415px) { @media screen and (max-width: 415px) {
.bottom-infocard { .bottom-infocard {
flex-direction: column; flex-direction: column;
padding: 80px 0 136px; padding: 80px 0 136px;
@ -271,7 +320,6 @@ body {
width: 100%; width: 100%;
max-width: 596px; max-width: 596px;
display: none; display: none;
} }
.bottom-infocard-texto { .bottom-infocard-texto {
@ -281,6 +329,17 @@ body {
.bottom-infocard-titulo { .bottom-infocard-titulo {
font-size: 24px; font-size: 24px;
} }
.middle-banner-mobile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
max-width: 368px;
margin: 0 auto;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -293,17 +352,13 @@ body {
flex-direction: column; flex-direction: column;
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 80px 23px; padding: 80px 23px;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards { .top-cards {
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
flex-direction: column; flex-direction: column;
} }
} }