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

93
assets/styles/main.css
View File

@ -214,6 +214,46 @@ body {
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) {
.top-infocard-subtitulo {
font-size: 20px;
@ -224,14 +264,26 @@ body {
}
.top-infocard-paragrafo {
font-size: 16px;
font-size: 17px;
line-height: 24px;
text-align: center;
padding: 0 30px;
padding: 0 32px;
}
.middle-banners {
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,8 +295,7 @@ body {
.bottom-infocard-flex {
flex-direction: column;
}
}
.bottom-infocard-img-mobile {
margin-bottom: 50px;
@ -252,38 +303,46 @@ body {
}
@media screen and (min-width: 415px) {
.main-banner-mobile,
.bottom-infocard-img-mobile {
display: none;
}
}
@media screen and (max-width: 415px) {
.bottom-infocard{
.bottom-infocard {
flex-direction: column;
padding: 80px 0 136px;
}
.bottom-infocard-img{
margin:0 0 50px;
.bottom-infocard-img {
margin: 0 0 50px;
width: 100%;
max-width: 596px;
display: none;
}
.bottom-infocard-texto{
.bottom-infocard-texto {
padding: 0 26px;
}
.bottom-infocard-titulo{
.bottom-infocard-titulo {
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) {
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
@ -293,17 +352,13 @@ body {
flex-direction: column;
grid-template-columns: 1fr;
padding: 80px 23px;
}
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
flex-direction: column;
}
}