diff --git a/src/components/Footer/FooterBottom/footerBottom.module.scss b/src/components/Footer/FooterBottom/footerBottom.module.scss index e2dbe30..513693f 100644 --- a/src/components/Footer/FooterBottom/footerBottom.module.scss +++ b/src/components/Footer/FooterBottom/footerBottom.module.scss @@ -115,7 +115,8 @@ .footerPayments { grid-area: payments; - width: max-content; + max-width: 344px; + width: auto; .footerPaymentsWrapper { div { @@ -147,3 +148,41 @@ } } } + +@media screen and (max-width: 370px) { + .containerFooterBottom { + .footerPayments { + display: block; + + .footerPaymentsWrapper { + div { + display: block; + img { + width: 30.27px; + height: 16.97px; + margin-right: 11px; + + &:last-child { + margin-top: 11px; + } + } + } + } + + .divider { + display: none; + } + + .footerPaymentsWrapperVtex { + div { + .vtexIcon { + width: 45px; + height: 28px; + margin-left: -2px; + margin-top: 11px; + } + } + } + } + } +} diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss index c44639c..f34c08d 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -87,7 +87,7 @@ grid-template-areas: "menuToggle logo cart" "search search search"; - grid-template-columns: 2.7343% 13.2812% 2.7343%; + grid-template-columns: 28px 136px 28px; .menuToggle { grid-area: menuToggle; diff --git a/src/components/MenuToggle/menuToggle.module.scss b/src/components/MenuToggle/menuToggle.module.scss index 06a71b6..47dd7e3 100644 --- a/src/components/MenuToggle/menuToggle.module.scss +++ b/src/components/MenuToggle/menuToggle.module.scss @@ -44,3 +44,11 @@ } } } + +@media screen and (max-width: 540px) { + .containerMenuToggle { + .contentMenuToogle { + width: 90.4%; + } + } +} diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss index bbd8f18..f5c2bd2 100644 --- a/src/pages/home.module.scss +++ b/src/pages/home.module.scss @@ -35,3 +35,12 @@ } } } + +@media screen and (max-width: 540px) { + .containerHome { + .floatElementsFooter { + right: 16px; + bottom: 16px; + } + } +}