Merge pull request #18 from SvetlanaM/responsive

FE: update containers
SvetlanaM · Nov 6, 2021 · f7b4e1b · f7b4e1b
2 parents 62c5eca + b3f4dcb
commit f7b4e1b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/components/Homepage/HomepageLeftContainer.tsx b/components/Homepage/HomepageLeftContainer.tsx
@@ -6,9 +6,11 @@ import SubmitButton from '../SubmitButton';
 const HomepageLeftContainer = (): JSX.Element => {
   const { t } = useTranslation();
   return (
-    <div className="w-full lg:w-1/2 py-5 lg:py-8 px-8 lg:flex lg:flex-col container-width">
-      <Menu />
-      <div className="flex justify-center flex-col h-auto lg:h-full mt-8 lg:mt-0 pl-0">
+    <div className="w-full lg:w-1/2 py-5 lg:py-8 lg:flex lg:flex-col">
+      <div className="container-left-half-width">
+        <Menu />
+      </div>
+      <div className="container-left-half-width flex justify-center flex-col h-auto lg:h-full mt-8 lg:mt-0 pl-0">
         <h1 className="font-extrabold text-4xl lg:text-5xl text-purple-darkest leading-none mb-6">
           {t(cs['menu_of_my_cat'])}
 

diff --git a/components/WelcomeBoxCheckbox.tsx b/components/WelcomeBoxCheckbox.tsx
@@ -13,7 +13,7 @@ export default function WelcomeBoxCheckbox({
 }: WelcomeBoxCheckboxProps): JSX.Element {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center">
+    <div className="flex justify-center">
       <input
         type="checkbox"
         name={name}

diff --git a/styles/globals.css b/styles/globals.css
@@ -8,14 +8,58 @@ body {
 }
 
 .container-width {
-    width: 90%;
-    max-width: 1600px;
     margin: 0 auto;
     float: none;
-    padding-left: 10x;
+    padding-left: 10px;
     padding-right: 10px;
 }
 
+@media screen and (min-width: 768px) {
+    .container-width {
+        max-width: 750px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .container-width {
+        max-width: 970px;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .container-width {
+        max-width: 1140px;
+    }
+}
+
+@media screen and (min-width: 1920px) {
+    .container-width {
+        max-width: 1600px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .container-left-half-width {
+        width: 100%;
+        max-width: 485px;
+        margin-left: auto;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .container-left-half-width {
+        max-width: 570px;
+    }
+}
+
+@media screen and (min-width: 1920px) {
+    .container-left-half-width {
+        max-width: 800px;
+    }
+}
+
 a {
     color: inherit;
     text-decoration: none;