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

feat: adicionando responsividade para celulares

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-10-12 18:18:47 -03:00
parent 8b3b17b22a
commit 30f9a3572f
1 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
styles/responsive.css
View File

@ -4,3 +4,78 @@
font-size: 1.13em;
}
}
/* Adicionando responsividade para celulares */
@media (max-width: 425px) {
/* Banner principal da pagina */
main .banner-container .banner-desktop{
display: none;
}
main .banner-container .banner-mobile{
display: block;
}
/* Titulo e descricao do site */
main section.container-description{
padding: 73px 0 90px;
gap: 24px;
}
main section.container-description .description-text h2.description-title{
font-size: 1.25rem;
}
main section.container-description .description-text h2.description-title span.description-subtitle{
font-size: 1.75rem;
}
main section.container-description .description-text p.description{
width: 86%;
padding: 16px 0 65px;
}
main section.container-description .description-text p.description .image-description{
width: 58%;
}
/* Container com tres imagens */
main .container-three-images {
margin-bottom: 112px;
}
main .container-three-images .three-images-wrapper {
gap: 3%;
padding: 0 23px;
top: 41px;
}
main .container-three-images .three-images-wrapper figure:nth-child(1),
main .container-three-images .three-images-wrapper figure:nth-child(2) {
display: flex;
width: 48.1%;
padding-bottom: 9px;
}
/* Artigo da pagina */
main article.container-article{
align-items: unset;
padding: 98px 0px 87px;
}
main article.container-article .article-text{
padding: 0 32px;
}
main article.container-article figure.article-image-mobile{
display: block;
padding-bottom: 50px;
}
main article.container-article figure.article-image-desktop{
display: none;
}
main article.container-article .article-text h3.article-title{
font-size: 1.5em;
}
main article.container-article .article-text p.article-description{
padding-top: 9px;
width: 100%;
}
/* Footer da pagina */
footer span.footer-description{
text-align: center;
width: 69%;
}
}