SOEOP-366 - updated styles per feedback. (#259)

* SOEOP-366 - updated styles per feedback. * Fixup - SOEOP-366 - adding spacing back to banner. * Update css/soe_helper.css Co-authored-by: Sherakama <[email protected]> * SOEOP-366 removed element from selector. * SOEOP-366 - fixed mobile views. * SOEOP-366 - resolved codeclimite csslinting recommendation. * SOEOP-366 - tweaked breakpoints to get better display on small screen. Co-authored-by: Sherakama <[email protected]>
SU-SOE · Dec 8, 2020 · 60b254c · 60b254c
1 parent 6bfc5a0
commit 60b254c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/css/soe_helper.css b/css/soe_helper.css
@@ -240,7 +240,7 @@ th {
   background: #f8f8f8; }
 
 .main {
-  padding: 0 0 50px;
+  padding: 80px 0 50px;
   background: #f8f8f8; }
   @media (max-width: 979px) {
     .main {
@@ -1565,6 +1565,9 @@ body:not(.page-admin) .sidebar .views-exposed-form .views-exposed-widget .form-s
   width: 100%;
   height: 360px;
   opacity: 0.4; }
+  @media (max-width: 485px) {
+    .node-type-stanford-news-item .fullwidth .field-name-field-s-news-banner img {
+      height: 160px; } }
 
 .node-type-stanford-news-item .content-body .field-name-field-s-image-image {
   margin-bottom: 0; }
@@ -1595,11 +1598,17 @@ body:not(.page-admin) .sidebar .views-exposed-form .views-exposed-widget .form-s
   .node-type-stanford-news-item .group-s-credits-style.field-group-div.credits {
     display: block; } }
 
+#block-ds-extras-banner {
+  margin-bottom: -70px; }
+  @media (max-width: 485px) {
+    #block-ds-extras-banner {
+      margin-bottom: 0; } }
+
 #block-ds-extras-banner-overlay {
   max-width: 750px;
   width: 100%;
   position: absolute;
-  top: 241px; }
+  top: 220px; }
   @media (max-width: 1200px) {
     #block-ds-extras-banner-overlay {
       max-width: 600px;
@@ -1609,15 +1618,15 @@ body:not(.page-admin) .sidebar .views-exposed-form .views-exposed-widget .form-s
       position: relative;
       top: -260px;
       margin-bottom: -245px; } }
-  @media (max-width: 580px) {
+  @media (max-width: 480px) {
     #block-ds-extras-banner-overlay {
-      top: -340px; } }
+      top: -160px; } }
   @media (max-width: 480px) {
     #block-ds-extras-banner-overlay {
       width: 100%; } }
   @media (max-width: 380px) {
     #block-ds-extras-banner-overlay {
-      top: -315px;
+      top: -170px;
       width: 250px; } }
   #block-ds-extras-banner-overlay .field-name-field-s-news-teaser .field-item {
     color: #000000;

diff --git a/scss/components/_soe_news.scss b/scss/components/_soe_news.scss
@@ -42,8 +42,8 @@
       height: 360px;
       opacity: 0.4;
 
-      @include breakpoint-max(med-small) {
-        height: 215px;
+      @media (max-width: 485px) {
+        height: 160px;
       }
     }
   }
@@ -99,11 +99,19 @@
   }
 }
 
+#block-ds-extras-banner {
+  margin-bottom: -70px;
+
+  @media (max-width: 485px) {
+    margin-bottom: 0;
+  }
+}
+
 #block-ds-extras-banner-overlay {
   max-width: 750px;
   width: 100%;
   position: absolute;
-  top: 210px;
+  top: 220px;
 
   @include breakpoint-max(large) {
     max-width: 600px;
@@ -121,16 +129,16 @@
     margin-bottom: -245px;
   }
 
-  @include breakpoint-max(smaller) {
-    top: -340px;
+  @media (max-width: 480px) {
+    top: -160px;
   }
 
   @include breakpoint-max(x-small) {
     width: 100%;
   }
 
   @media (max-width: 380px) {
-    top: -315px;
+    top: -170px;
     width: 250px;
   }