Reviews adaptive complete

Dual-Ice · May 6, 2020 · c0dd22f · c0dd22f
1 parent cbc61cf
commit c0dd22f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 6 deletions.
diff --git a/src/styles/blocks/avatar.pcss b/src/styles/blocks/avatar.pcss
@@ -4,10 +4,21 @@
   height: 200px;
   overflow: hidden;
   border-radius: 50%;
+  flex-shrink: 0;
+
+  @include tablets {
+    width: 170px;
+    height: 170px;
+  }
 
   &--small {
     width: 75px;
     height: 75px;
+
+    @include phones {
+      width: 50px;
+      height: 50px;
+    }
   }
 }
 

diff --git a/src/styles/blocks/reivew.pcss b/src/styles/blocks/reivew.pcss
@@ -2,6 +2,10 @@
   display: flex;
   height: 100%;
 
+  @include tablets {
+    font-size: 14px;
+  }
+
   &:before {
     width: 75px;
     height: 75px;
@@ -10,6 +14,16 @@
     margin-right: 20px;
     opacity: 0.05;
     flex-shrink: 0;
+
+    @include desktop {
+      width: 70px;
+      height: 70px;
+    }
+
+    @include tablets {
+      width: 30px;
+      height: 30px;
+    }
   }
 }
 
@@ -22,8 +36,12 @@
   opacity: .5;
   font-weight: 600;
   line-height: 30px;
-  padding-bottom: 10px; // временное решение
-  padding-right: 60px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+
+  @include phones {
+    padding-bottom: 20px;
+  }
 }
 
 .review__author {

diff --git a/src/styles/blocks/reviews-slider.pcss b/src/styles/blocks/reviews-slider.pcss
@@ -1,5 +1,10 @@
 .reviews-slider {
   max-width: 1008px;
+
+  @include phones {
+    overflow: hidden;
+    max-width: 400px;
+  }
 }
 
 .reviews-slider__buttons {
@@ -15,8 +20,18 @@
 .revies-slider__list {
   display: flex;
   justify-content: space-between;
+
+  @include phones {
+    overflow: hidden;
+    justify-content: flex-start;
+  }
 }
 
 .reviews__slider-item {
-  width: 50%;
+  width: 45%;
+  flex-shrink: 0;
+
+  @include phones {
+    width: 100%;
+  }
 }
diff --git a/src/styles/blocks/reviews.pcss b/src/styles/blocks/reviews.pcss
@@ -2,14 +2,34 @@
   position: relative;
   margin-bottom: 155px;
   padding-top: 230px;
+
+  @include desktop {
+    padding-top: 200px;
+  }
 }
 
 .reviews__title {
   display: flex;
   align-items: center;
   margin-bottom: 90px;
+
+  @include phones {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 30px;
+  }
 }
 
 .reviews__title-text {
   margin-right: 120px;
+
+  @include desktop {
+    margin-right: 75px;
+  }
+
+  @include phones {
+    margin-right: 0;
+    margin-bottom: 25px;
+  }
 }
diff --git a/src/styles/blocks/user.pcss b/src/styles/blocks/user.pcss
@@ -9,16 +9,30 @@
       margin-right: 30px;
     }
 
-     .user__name {
-       margin-bottom: 10px;
-     }
+    .user__name {
+      margin-bottom: 10px;
+    }
+
+    @include tablets {
+      .user__name {
+        font-size: 16px;
+      }
+
+      .user__avatar {
+        margin-right: 20px;
+      }
+    }
   }
 }
 
 .user__avatar {
   display: flex;
   justify-content: center;
   margin-bottom: 80px;
+
+  @include phones {
+    margin-bottom: 30px;
+  }
 }
 
 .user__data {
@@ -38,6 +52,14 @@
   opacity: .3;
 }
 
+.user__data-value {
+  padding-left: 5%;
+
+  @include phones {
+    padding-left: 6%;
+  }
+}
+
 .user__name {
   font-size: 18px;
   font-weight: 700;