fix: ajustes responsivos acima de 2500px

This commit is contained in:
Ramon Dias Ferreira 2023-01-20 18:39:47 -03:00
parent 7a44067e59
commit 55a6ed9a42
12 changed files with 161 additions and 11 deletions

View File

@ -10,7 +10,7 @@ const Main = () => {
<div className={styles['main__route']}>
<img className={styles['main__home']} src={Home} alt='home'></img>
<img className={styles['main__arrow']} src={Arrow} alt='arrow'></img>
<p>Institucional</p>
<p className={styles['container__main-title']}>Institucional</p>
</div>
<Institucional/>
</div>

View File

@ -24,9 +24,6 @@
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {

View File

@ -121,3 +121,4 @@ button:active {
padding: 0;
}
}

View File

@ -38,3 +38,14 @@
}
}
@media (min-width: 2500px) {
.devolucao__title{
font-size: 48px;
line-height: 56px;
}
.devolucao__description{
font-size: 26px;
line-height: 30px
}
}

View File

@ -38,3 +38,14 @@
}
}
@media (min-width: 2500px) {
.entrega__title{
font-size: 48px;
line-height: 56px;
}
.entrega__description{
font-size: 26px;
line-height: 30px
}
}

View File

@ -131,6 +131,7 @@ footer {
.footer__container-bandeiras{
display: flex;
padding: 15px 0px;
width: 40%;
justify-content: space-between;
@ -156,7 +157,7 @@ footer {
}
img {
width: 10%;
width: 15%;
}
}
@ -209,3 +210,52 @@ footer {
}
}
@media (min-width: 2500px) {
footer {
.footer__newsletter{
.footer__newsletter-form{
label {
font-size: 36px;
line-height: 42px;
}
.footer__newsletter-input{
button{
font-size: 24px;
line-height: 28px;
}
}
}
}
.footer__top {
.footer__infos{
.footer__info-title{
font-size: 28px;
line-height: 33px;
}
.footer__info{
font-size: 24px;
line-height: 28px;
}
}
.footer__redes p{
font-size: 28px;
line-height: 33px;
}
}
.footer__bottom {
.footer__text-bottom {
font-size: 20px;
line-height: 23px;
}
.footer__certificate p{
font-size: 20px;
line-height: 23px;
}
}
}
}

View File

@ -19,7 +19,6 @@ header {
.header__logo{
width: 10.63%;
height: 25.86px;
}
.header__container-input{
@ -39,7 +38,7 @@ header {
padding-left: 16px;
}
.header__search-icon{
height: 18px;
position: absolute;
color: #303030;
margin-right: 7px;
@ -59,9 +58,7 @@ header {
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
}
.header__cart{
height: 28px;
}
}
}
@ -126,3 +123,23 @@ header {
}
}
@media (min-width: 2500px) {
header {
.header__top{
.header__my-account-cart{
.header__account{
font-size: 28px;
line-height: 33px;
}
}
}
.header__botton {
.header__botton-nav-text{
font-size: 28px;
line-height: 33px;
}
}
}
}

View File

@ -75,3 +75,17 @@
margin-top: 22px;
}
}
@media (min-width: 2500px) {
.inst__container li {
font-size: 32px;
line-height: 38px;
}
.title {
font-size: 48px;
line-height: 56px;
letter-spacing: 0.1em;
}
}

View File

@ -7,7 +7,11 @@
.main__home {
width: 15.69%;
height: 16px;
}
.main__arrow{
width: 7%;
}
@ -27,3 +31,13 @@
padding: 29px 16px;
}
}
@media (min-width: 2500px) {
.main__route{
.container__main-title {
font-size: 24px;
line-height: 28px;
}
}
}

View File

@ -38,3 +38,14 @@
}
}
@media (min-width: 2500px) {
.pagamento__title{
font-size: 48px;
line-height: 56px;
}
.pagamento__description{
font-size: 26px;
line-height: 30px
}
}

View File

@ -39,3 +39,15 @@
}
}
@media (min-width: 2500px) {
.seguranca__title{
font-size: 48px;
line-height: 56px;
}
.seguranca__description{
font-size: 26px;
line-height: 30px
}
}

View File

@ -39,3 +39,15 @@
}
}
@media (min-width: 2500px) {
.sobre__title{
font-size: 48px;
line-height: 56px;
}
.sobre__description{
font-size: 26px;
line-height: 30px
}
}