forked from M3-Academy/desafio-react-e-typescript
feat(footer-bottom): Torna footer bottom responsivo para telas maiores que 2500px #20
@ -5,6 +5,10 @@
|
||||
height: 64px;
|
||||
background: variables.$color-black;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
height: 134px;
|
||||
}
|
||||
@ -37,6 +41,11 @@
|
||||
text-transform: capitalize;
|
||||
color: variables.$color-white;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
@ -56,11 +65,23 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.creditcard {
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
width: 24px;
|
||||
border: 1px solid variables.$color-grey;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.vtex-certified {
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
@ -76,6 +97,14 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
img {
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
@ -83,6 +112,11 @@
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
color: variables.$color-white;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user