diff --git a/src/template/Footer/index.module.scss b/src/template/Footer/index.module.scss index fb96ecb..d6b3277 100644 --- a/src/template/Footer/index.module.scss +++ b/src/template/Footer/index.module.scss @@ -15,21 +15,26 @@ } .container-top { - display: flex; - align-items: flex-start; - flex-direction: column; - padding-top: 17px; padding-bottom: 24px; + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 12px; + @media only screen and (min-width: 1025px) { + width: function.fluid(1080px, 1280px); + padding-top: 50px; + padding-bottom: 50px; + + margin: 0 auto; + display: flex; - flex-direction: row; align-items: flex-start; justify-content: space-between; - - width: function.fluid(1080px, 1280px); - margin: 0 auto; + flex-direction: row; + gap: 0px; } @media only screen and (min-width: 2500px) { @@ -98,23 +103,23 @@ .accordion { display: flex; align-items: flex-start; - flex-direction: column; justify-content: center; + flex-direction: column; } // moved container bottom actions footer for large, medium devices .container-bottom { .actions-bottom { + width: 100%; + height: 100%; + padding: 15px 0; + display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 15px; - width: 100%; - height: 100%; - padding: 15px 0; - @media only screen and (min-width: 1025px) { flex-direction: row; justify-content: space-between; @@ -133,6 +138,7 @@ .lists { width: 100%; + display: flex; align-items: stretch; flex-direction: column; @@ -167,11 +173,11 @@ } @media only screen and (min-width: 1025px) { + width: function.fluid(707px, 1080px); + flex-direction: row; justify-content: space-between; - width: function.fluid(707px, 1080px); - & > li { width: function.fluid(155px, 707px); } @@ -292,7 +298,7 @@ } } -// control view components order +// control view order components .container-bottom { .phrase { order: 2;