Merge pull request #80 from Goldenrash-lab/feature/stats-bug-fixes

fixed styles mob and tablet
Goldenrash-lab · Jan 13, 2024 · 2e3686b · 2e3686b
2 parents 9735316 + 4fa51be
commit 2e3686b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/components/Chart/Chart.styled.js b/src/components/Chart/Chart.styled.js
@@ -14,13 +14,14 @@ export const StyledTitle = styled.h2`
   font-weight: 400;
   line-height: normal;
 
-  @media only screen and (min-width: 767px) {
+  @media only screen and (min-width: 768px) and (max-width: 1279px) {
     margin-left: 32px;
     width: 336px;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
     width: 280px;
+    margin-left: 20px;
   }
 `;
 
@@ -29,14 +30,15 @@ export const StyledContainer = styled.div`
   width: 715px;
   margin-left: 69px;
 
-  @media only screen and (min-width: 767px) {
+  @media only screen and (min-width: 768px) and (max-width: 1279px) {
     width: 336px;
-    margin-left: 32px;
+    margin-left: 0;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
     flex-direction: column;
     width: 280px;
+    margin-left: 20px;
   }
 `;
 
@@ -49,7 +51,10 @@ export const StyledChartContainer = styled.div`
   width: ${props => `${props.$doughnutSize}px`};
   height: ${props => `${props.$doughnutSize}px`};
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (min-width: 768px) {
+  }
+
+  @media only screen and (max-width: 767px) {
     margin-bottom: 32px;
   }
 `;

diff --git a/src/components/StatisticsDashboard/StatisticsDashboard.styled.js b/src/components/StatisticsDashboard/StatisticsDashboard.styled.js
@@ -8,12 +8,15 @@ export const StyledContainer = styled.div`
   margin-bottom: 20px;
 
   @media only screen and (min-width: 768px) {
+    width: 336px;
     gap: 16px;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
+    width: 280px;
+    height: 120px;
     flex-direction: column;
-    margin-bottom: 20px;
+    gap: 20px;
   }
 `;
 
@@ -34,7 +37,7 @@ export const StyledSelect = styled.select`
     width: 160px;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
     width: 280px;
   }
 `;
diff --git a/src/components/StatisticsTable/StatisticsTable.styled.js b/src/components/StatisticsTable/StatisticsTable.styled.js
@@ -7,7 +7,7 @@ export const StyledTable = styled.div`
     width: 336px;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
     width: 280px;
   }
 `;
@@ -31,7 +31,7 @@ export const StyledTitleContainer = styled.h3`
     width: 336px;
   }
 
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 767px) {
     width: 280px;
   }
 `;