update adaptive view

Inna-Mykytiuk · Sep 4, 2023 · 47690d8 · 47690d8
1 parent 83bfc6e
commit 47690d8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/components/Container/Container.styled.jsx b/src/components/Container/Container.styled.jsx
@@ -1,20 +1,19 @@
 import styled from '@emotion/styled';
 
-const breakpoints = {
-  xs: '320px',
-  s: '375px',
-  m: '768px',
-  l: '1440px',
-};
-
-const smallDeviceMediaQuery = `@media (max-width: ${breakpoints.m})`;
+const smallDeviceMediaQuery = `@media (max-width: 768px)`;
+const bigDeviceMediaQuery = '@media (max-width: 1280px)';
 
 export const MainContainer = styled.div`
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 20px;
 
+
+  ${bigDeviceMediaQuery} {
+    padding: 0 10px;
+    max-width: 800px;
+  }
   ${smallDeviceMediaQuery} {
     padding: 0 10px;
     max-width: 380px;

diff --git a/src/pages/Home.styled.jsx b/src/pages/Home.styled.jsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-const smallDeviceMediaQuery = '@media (max-width: 600px)';
+const smallDeviceMediaQuery = '@media (max-width: 768px)';
+const bigDeviceMediaQuery = '@media (max-width: 1280px)';
 
 export const HomePage = styled.div`
   width: 100%;
@@ -21,8 +22,14 @@ export const HomeContainer = styled.div`
   width: 600px;
   margin-left: auto;
 
+
+  ${bigDeviceMediaQuery} {
+    width: 500px;
+  }
   ${smallDeviceMediaQuery} {
     width: 320px;
+    align-items: center;
+    margin: 0;
   }
 `;