added media query for components near third slider (#73)

* fixed cards on dark theme and swipe behavior * added media query for components near third slider
fe-aug23-team4 · Dec 21, 2023 · 1d472f6 · 1d472f6
1 parent 63b0e8d
commit 1d472f6
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 135 deletions.
diff --git a/src/modules/HomePage/componets/ShopByCategory/ShopByCategory.module.scss b/src/modules/HomePage/componets/ShopByCategory/ShopByCategory.module.scss
@@ -1,104 +1,116 @@
-@import '../../../../styles/blocks/grid';
-@import '../../../../styles/utils/variables/colors';
-@import '../../../../styles/utils/mixins/mixin-media';
-@import '../../../../styles/utils/mixins/mixin-typography';
-
-.shopByCategory {
-  &__title {
-    margin-bottom: 1.5rem;
-    @include h2-typography;
-  }
-
-  &__titleDark {
-    @include typography-dark;
-  }
-
-  &__container {
-    @extend .grid;
-  }
-
-  &__article {
-    margin-bottom: 32px;
-    grid-column: span 4;
-    color: $color__primary;
-    @include onTablet {
-      margin-bottom: 0;
-    }
-
-    @include onDesktop {
-      grid-column: span 8;
-    }
-  }
-
-  &__subtitle {
-    @include h4-typography;
-  }
-
-  &__subtitleDark {
-    @include typography-dark;
-  }
-
-  &__content {
-    color: $color__secondary;
-    @include bodyText-typography;
-  }
-
-  &__contentDark {
-    color: $color__dark-theme__secondary;
-  }
-
-  &__imgContainer {
-    position: relative;
-    height: 0;
-    padding-bottom: 100%;
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-  }
-
-  &__imgPhones {
-    background-color: #6D6474;
-  }
-
-  &__imgDark {
-    border-radius: 0px;
-  }
-
-  &__imgTablets {
-    background-color: #D3D3D3;
-  }
-
-  &__imgAccessories {
-    background-color: #D53C51;
-  }
-
-  &__picture {
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 100%;
-    left: 10%;
-    top: 10%;
-    transition: transform 0.3s ease;
-  }
-
-  &__pictureTablet {
-    left: 7%;
-    top: 5%;
-  }
-
-  &__pictureAccessories {
-    left: 3%;
-    top: 0%;
-  }
-
-  &__imgContainer:hover &__picture {
-    transform: scale(1.2);
-  }
-}
-
-.shopByCategoryDark {
-  background-color: $color__dark-theme__black;
-}
-
-
+@import '../../../../styles/blocks/grid';
+@import '../../../../styles/utils/variables/colors';
+@import '../../../../styles/utils/mixins/mixin-media';
+@import '../../../../styles/utils/mixins/mixin-typography';
+
+.shopByCategory {
+  &__title {
+    margin-bottom: 1.5rem;
+    @include h2-typography;
+
+    @include onMobile {
+      margin-top: 56px;
+    }
+
+    @include onTablet {
+      margin-top: 64px;
+    }
+
+    @include onDesktop {
+      margin-top: 80px;
+    }
+  }
+
+  &__titleDark {
+    @include typography-dark;
+  }
+
+  &__container {
+    @extend .grid;
+  }
+
+  &__article {
+    margin-bottom: 32px;
+    grid-column: span 4;
+    color: $color__primary;
+    @include onTablet {
+      margin-bottom: 0;
+    }
+
+    @include onDesktop {
+      grid-column: span 8;
+    }
+  }
+
+  &__subtitle {
+    @include h4-typography;
+  }
+
+  &__subtitleDark {
+    @include typography-dark;
+  }
+
+  &__content {
+    color: $color__secondary;
+    @include bodyText-typography;
+  }
+
+  &__contentDark {
+    color: $color__dark-theme__secondary;
+  }
+
+  &__imgContainer {
+    position: relative;
+    height: 0;
+    padding-bottom: 100%;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+  }
+
+  &__imgPhones {
+    background-color: #6D6474;
+  }
+
+  &__imgDark {
+    border-radius: 0px;
+  }
+
+  &__imgTablets {
+    background-color: #D3D3D3;
+  }
+
+  &__imgAccessories {
+    background-color: #D53C51;
+  }
+
+  &__picture {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    left: 10%;
+    top: 10%;
+    transition: transform 0.3s ease;
+  }
+
+  &__pictureTablet {
+    left: 7%;
+    top: 5%;
+  }
+
+  &__pictureAccessories {
+    left: 3%;
+    top: 0%;
+  }
+
+  &__imgContainer:hover &__picture {
+    transform: scale(1.2);
+  }
+}
+
+.shopByCategoryDark {
+  background-color: $color__dark-theme__black;
+}
+
+
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -6,39 +6,8 @@
 
 .container {
   @extend .container;
-  // @extend .grid;
 }
 
-// .gridItem {
-//   grid-column: 1 / 12;
-// }
-
-// .ccc {
-//   grid-column: 13 / 24;
-// }
-
-// .breadcrumbs {
-//   grid-column: 1 / -1;
-// }
-
-// .backButton {
-//   grid-column: 1 / -1;
-// }
-
-// .slider-container {
-//   @include onMobile {
-//     grid-column: 1 / -1;
-//   }
-
-//   @include onTablet {
-//     grid-column: 1 / 7;
-//   }
-
-//   @include onDesktop {
-//     grid-column: 1 / 13;
-//   }
-// }
-
 .productDetails {
   &__title {
     margin-top: 1rem;
@@ -66,6 +35,26 @@
     transform: translateY(-330px);
   }
 
+  @media (min-width: 740px) and (max-width: 839px) {
+    transform: translateY(-369px);
+  }
+
+  @media (min-width: 840px) and (max-width: 939px) {
+    transform: translateY(-400px);
+  }
+
+  @media (min-width: 940px) and (max-width: 1039px) {
+    transform: translateY(-435px);
+  }
+
+  @media (min-width: 1040px) and (max-width: 1119px) {
+    transform: translateY(-465px);
+  }
+
+  @media (min-width: 1120px) and (max-width: 1199px) {
+    transform: translateY(-495px);
+  }
+
   @include onDesktop {
     transform: translateY(-510px);
   }

diff --git a/src/modules/shared/ProductSlider/ProductSlider.module.scss b/src/modules/shared/ProductSlider/ProductSlider.module.scss
@@ -6,6 +6,15 @@
 
   @include onMobile {
     width: 215px;
+    margin-top: 56px;
+  }
+
+  @include onTablet {
+    margin-top: 64px;
+  }
+
+  @include onDesktop {
+    margin-top: 80px;
   }
 
   &__DARK {