anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(Footer.module.scss): corrigindo posição do footer

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-05 16:03:50 -03:00
parent 3be53d66b2
commit 7b940e23c5
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Footer/Footer.module.scss
View File

@ -2,8 +2,9 @@
footer {
bottom: 0;
position: absolute;
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
@ -34,6 +35,7 @@ footer {
}
@media (max-width: 376px) {
width: 91.484%;
height: 128px;
}
& ul {
margin-top: 0;
@ -66,22 +68,16 @@ footer {
align-items: center;
justify-content: space-between;
max-width: 398.61px;
// width: 36.898%;
padding-left: 0;
column-gap: 12px;
@media (min-width: 2500px) {
max-width: 692px;
// width: 30.078%;
}
@media (max-width: 1025px) {
order: 1;
//
// width: 30.64%;
}
@media (max-width: 376px) {
column-gap: 11px;
//
// width: 100%;
}
& .Line {
width: 1px;
@ -258,7 +254,6 @@ footer {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
// column-gap: 121px;
column-gap: calc(100% - 90%);
padding-left: 0;
margin: 10px 0 0;
@ -295,9 +290,6 @@ footer {
flex-direction: column;
& input {
display: none;
// position: absolute;
// right: 0;
// margin: 0;
}
& input:checked ~ .Menu__List__Group__SubTitle {
@media (max-width: 1025px) {
@ -345,7 +337,13 @@ footer {
}
}
& li {
min-width: 155px;
width: 155px;
@media (min-width: 2500px) {
min-width: 315px;
}
@media (max-width: 1025px) {
width: auto;
}
& a {
text-decoration: none;
font-family: "Roboto";
@ -390,9 +388,8 @@ footer {
padding-left: 0;
margin: 0;
display: flex;
column-gap: 50px;
position: absolute;
right: 16px;
position: relative;
right: 0;
@media (min-width: 2500px) {
column-gap: 18px;
}
@ -405,6 +402,7 @@ footer {
column-gap: 0px;
}
&__Lista {
position: relative;
list-style: none;
padding-left: 0;
margin-top: 10px;
@ -460,11 +458,23 @@ footer {
}
&__SubLista {
padding-left: 0;
position: fixed;
right: 16px;
top: calc(100% - 259px);
z-index: 1;
@media (min-width: 2500px){
top: calc(100% - 353.76px);
}
@media (max-width: 1025px) {
position: fixed;
right: 16px;
top: calc(100% - 105px);
}
@media (max-width: 376px) {
top: calc(100% - 113px);
}
& li {
width: 34.01px;
height: 34.01px;