diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss index be42b5d..4141e55 100644 --- a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss +++ b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss @@ -1,5 +1,4 @@ .floating-icons-wrapper { -// background-color: red; position: fixed; right: 16px; bottom: 190px; @@ -9,6 +8,8 @@ align-items: center; gap: 5px; + padding: 0; + @media screen and (width >= 2500px) { bottom: 229.24px; } @@ -17,8 +18,14 @@ bottom: 51px; } + @media screen and (width <= 480px) { + bottom: 29px; + right: 16px; + } + .whatsapp-button { border: 0; + padding: 0; background: transparent; img { diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss index 9ade37e..afcb7f6 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.module.scss +++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss @@ -9,9 +9,9 @@ @media screen and (width <= 1024px) { display: grid; grid-template-areas: - "paymentSolutions" - "address" - "authors"; + "paymentSolutions" + "address" + "authors"; gap: 15px; padding: 15px 16px; } @@ -29,7 +29,7 @@ p { margin: 0; } - + @media screen and (width >= 2500px) { font-size: 20px; line-height: 23px; @@ -52,9 +52,11 @@ grid-area: paymentSolutions; } - .menu-list { - // background-color: blue; + @media screen and (width <= 480px) { + gap: 11px; + } + .menu-list { margin: 0; padding: 0; list-style: none; @@ -62,6 +64,10 @@ display: flex; gap: 12px; + @media screen and (width <= 480px) { + gap: 11px; + } + li { // transition: all 0.2s ease-in-out; @@ -75,6 +81,11 @@ height: 40px; } + @media screen and (width <= 480px) { + width: 100%; //30px; + height: 17px; + } + // &:hover { // border-radius: 50%; // background: #292929; @@ -92,6 +103,10 @@ @media screen and (width >= 2500px) { height: 48px; } + + @media screen and (width <= 480px) { + height: 20px; + } } img { @@ -103,6 +118,11 @@ width: 106px; height: 66px; } + + @media screen and (width <= 480px) { + width: 100%; //45px; + height: 28px; + } } } diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx index eabba5b..eade6fe 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.tsx +++ b/src/components/Footer/FooterBottom/FooterBottom.tsx @@ -13,17 +13,6 @@ import PCI from "../assets/vtex-pci-200.svg"; import VtexIcon from "../assets/vtex-icon.svg"; import M3Icon from "../assets/m3-icon.svg"; -// import { ReactComponent as Master } from "../assets/Master.svg"; -// import { ReactComponent as Visa } from "../assets/Visa.svg"; -// import { ReactComponent as Amex } from "../assets/Diners.svg"; -// import { ReactComponent as Elo } from "../assets/Elo.svg"; -// import { ReactComponent as Hipercard } from "../assets/Hiper.svg"; -// import { ReactComponent as Paypal } from "../assets/Pagseguro.svg"; -// import { ReactComponent as Boleto } from "../assets/Boleto.svg"; -// import { ReactComponent as PCI } from "../assets/vtex-pci-200.svg"; -// import { ReactComponent as VtexIcon } from "../assets/vtex-icon.svg"; -// import { ReactComponent as M3Icon } from "../assets/m3-icon.svg"; - const PaymentSolutions = [ { src: Master, @@ -71,13 +60,19 @@ const FooterBottom = () => { ))} - +
Powered by
- +Developed by
- +