fix(videodetail): fix breakpoints and margins to meet designs

jwplayer · Aug 2, 2021 · 48968e4 · 48968e4
1 parent 880a1aa
commit 48968e4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -12,6 +12,10 @@
 .mainPadding {
   padding: 37px 56px 0;
 
+  @include responsive.desktop-small-only() {
+    padding: 34px 36px 36px;
+  }
+
   @include responsive.tablet-only() {
     padding: 34px 24px 24px;
   }
@@ -38,14 +42,15 @@
 .info {
   width: 70%;
   max-width: 650px;
-  min-height: 380px;
 
   @include responsive.tablet-only() {
     width: 350px;
+    min-height: 380px;
   }
 
   @include responsive.mobile-only() {
     width: 100%;
+    min-height: 380px;
     padding-top: 225px;
   }
 }
@@ -115,9 +120,11 @@
   justify-content: flex-start;
   align-items: center;
   width: 100%;
+  margin: 0 -6px;
 
   > button {
-    margin: 5px;
+    justify-content: center;
+    margin: 6px;
   }
 
   @include responsive.mobile-and-tablet() {

diff --git a/src/screens/Search/Search.module.scss b/src/screens/Search/Search.module.scss
@@ -3,7 +3,6 @@
 @use '../../styles/mixins/responsive';
 
 .search {
-
   margin: 0 variables.$base-spacing * 4;
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
@@ -12,21 +11,25 @@
   > main {
     margin-top: 6px;
   }
+
   @include responsive.mobile-only() {
     margin: 0 variables.$base-spacing;
   }
 
   @include responsive.tablet-only() {
     margin: 0 variables.$base-spacing * 2;
   }
+
+  @include responsive.desktop-small-only() {
+    margin: 0 variables.$base-spacing * 3;
+  }
 }
 
 .main {
   margin: -8px;
 }
 
 .header {
-
   display: flex;
   align-items: center;
   margin: 24px 0;