ISTWCMS-5712: css for the breakdown of the view-content grids, now phone has...

ISTWCMS-5712: css for the breakdown of the view-content grids, now phone has single column and small break and up have the 2 column grid with full width top then grid split then bottom full

src/patterns/04-components/view/_view.scss

@@ -211,38 +211,50 @@ $sidebar-width: 18.75rem;
 .path-profiles,
 .path-opportunities {
   .view-content {
-    display: grid;
-    gap: var(--grid-gap);
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(4, min-content);
+    display: block;
     padding: 0;
+    @media(min-width: $screen-sm){
+      display: grid;
+      gap: var(--grid-gap);
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, min-content);
+    }
+    .views-row{
+      margin-bottom: var(--grid-gap);
+      @media(min-width: $screen-sm){
+        margin-bottom: 0;
+      }
+    }
   }
 }
 .path-news,
 .path-blog,
 .path-events{
   .view-content {
-    .views-row{
-      &:first-of-type,
-      &:nth-of-type(10n){
-        grid-column: 1 / 3;
+    @media(min-width: $screen-sm){
+      .views-row{
+        &:first-of-type,
+        &:nth-of-type(10n){
+          grid-column: 1 / 3;
+        }
       }
     }
   }
   // Moving the rss button up for the blog news and events
   .block-page-title-block{
     padding-right: 12rem;
-    @media(min-width: $screen-md) {
+    @media(min-width: $screen-sm) {
       padding-right: inherit;
     }
   }
   .view-interact{
     margin-top: -3.25rem;
-    @media(min-width: $screen-md) {
+    @media(min-width: $screen-sm) {
       margin-top: -4rem;
     }
   }
 }
+
 .view-uw-view-news-items,
 .view-uw-view-blogs,
 .view-uw-view-events,
@@ -305,6 +317,7 @@ $sidebar-width: 18.75rem;
     }
   }
 }
+
 .path-taxonomy {
   .view-content {
     padding: var(--size-2);

src/patterns/04-components/view/view-content/_view-content.scss

@@ -4,9 +4,6 @@
   // With Filters
   &.with-filters {
     .view-content {
-      //@include uw-flex-grid();
-      //grid-column:1/2;
-      //grid-row:2/3;
       margin-top: var(--size-2);
       width: 100%;
       &--message {