diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css index 4066ac164..d90ac7999 100644 --- a/FrontEnd/src/App.css +++ b/FrontEnd/src/App.css @@ -1,7 +1,5 @@ .App { - /*for footer correct work*/ display: flex; - min-height: 100vh; flex-direction: column; } diff --git a/FrontEnd/src/App.jsx b/FrontEnd/src/App.jsx index e9c40b406..296f7b817 100644 --- a/FrontEnd/src/App.jsx +++ b/FrontEnd/src/App.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import './App.css'; import { RouterProvider } from 'react-router-dom'; import router from './routes/Router'; diff --git a/FrontEnd/src/components/Footer/Footer.module.css b/FrontEnd/src/components/Footer/Footer.module.css index 84bd6beba..38f3f48f9 100644 --- a/FrontEnd/src/components/Footer/Footer.module.css +++ b/FrontEnd/src/components/Footer/Footer.module.css @@ -1,6 +1,6 @@ .footer-main { display: flex; - width: 100vw; + width: 100%; background: var(--footer-backround); justify-content: center; } @@ -8,8 +8,8 @@ .footer-content { display: flex; flex-direction: column; - justify-content: space-around; - padding: 32px 24px; + justify-content: space-between; + padding: 32px 0px; width: 327px; height: 679px; gap: 32px; @@ -22,11 +22,19 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .footer-content { flex-direction: row; - width: 1304px; + width: 1136px; height: 205px; - padding: 32px 104px; + padding: 32px 32px 48px 32px; + gap: 24px; + } +} + +@media only screen and (min-width: 1512px) { + .footer-content { + width: 1304px; + gap: 32px; } } diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css index bed5b8621..69fd49083 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css @@ -72,7 +72,7 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .footer-address__text { flex-direction: column; } @@ -82,3 +82,10 @@ padding-left: 0px; } } + +@media only screen and (min-width: 1512px) { + .footer-address__contacts { + padding-top: 25px; + padding-left: 0px; + } +} diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css index 4fcf5c546..042d98620 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css @@ -53,11 +53,10 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .navigation-content { flex-direction: column; justify-content: flex-end; - min-width: 569px; } .navigation-content__company, @@ -72,7 +71,16 @@ .navigation-content-section__text-block, .navigation-content-company__text-block { flex-direction: row; - gap: 35px; padding-top: 15px; } } + +@media only screen and (min-width: 1512px) { + .navigation-content { + min-width: 569px; + } + .navigation-content-section__text-block, + .navigation-content-company__text-block { + gap: 35px; + } +} diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css index 1110eb5b5..b70c1441b 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css @@ -58,7 +58,7 @@ } } -@media only screen and (min-width: 1512px) { +@media only screen and (min-width: 1200px) { .policy-divider { background: none; } diff --git a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css index 20b2313e5..48c029b63 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css @@ -1,7 +1,7 @@ .scroll-to-top-button { position: fixed; bottom: 30px; - left: 80%; + left: 85%; width: 40px; height: 40px; background-color: var(--footer-scroll-button); @@ -26,8 +26,14 @@ background-color: var(--footer-scroll-button); } -@media only screen and (min-width: 1512px) { - .scroll-to-top-button { +@media only screen and (min-width: 768px) { + .scroll-to-top-button { + left: 92%; + } +} + +@media only screen and (min-width: 1200px) { + .scroll-to-top-button { left: 95%; } -} \ No newline at end of file +} diff --git a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx b/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx deleted file mode 100644 index dfd9442fb..000000000 --- a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import css from './FooterPolicy.module.css'; -import { Link } from 'react-router-dom'; - -const POLICY_LINKS = [ - { - id: 'i0', - title: 'Політика конфіденційності ', - link: 'privacy-policy/' - }, - { - id: 'i1', - title: 'Умови користування', - link: 'terms-and-conditions/' - }, - { - id: 'i3', - title: 'Contact', - link: 'contact/' - } -]; - -function FooterPolicy() { - return ( -
- {profile.activities} -
-- {profile.regions} +
+ {profile.activities}
-+ {profile.regions} +
+