[#36] Fixed full width column in md size

backdrop-contrib · Jan 27, 2025 · f5bdc2d · f5bdc2d
1 parent fdfbf20
commit f5bdc2d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git a/dist/main.compiled.css b/dist/main.compiled.css
@@ -3490,6 +3490,12 @@ html .layout .l-sidebar + .l-content{
   grid-column: span 1 / span 1;
 }
 
+@media (min-width: 576px){
+  .col-full{
+    grid-column: span 4 / span 4;
+  }
+}
+
 @media (min-width: 768px){
   .col-full{
     grid-column: span 6 / span 6;
@@ -4773,6 +4779,14 @@ ul.primary li.active a,
   grid-column: span 1 / span 1;
 }
 
+@media (min-width: 576px){
+  .l-footer .l-footer-inner .full,
+    .l-footer .l-footer-inner .block-theme-hooks-stanford-decanter-global-footer,
+    .l-footer .l-footer-inner .block-system-header{
+    grid-column: span 4 / span 4;
+  }
+}
+
 @media (min-width: 768px){
   .l-footer .l-footer-inner .full,
     .l-footer .l-footer-inner .block-theme-hooks-stanford-decanter-global-footer,

diff --git a/docs/styles.md b/docs/styles.md
@@ -77,4 +77,13 @@ Some other useful utility styles include:
 - `.gridded-region`: Turn a layout region into a responsive 12 column grid. NB: The 'Page Bottom' and 'Local Footer' regions already have this style applied.
 - `.hero`: Turn any block or content into a Hero block. You can also create hero blocks by using the default 'Hero' content type.
 
-[Edit this page on Github](https://github.com/backdrop-contrib/stanford_decanter/edit/main/docs/styles.md)
+[Edit this page on Github](https://github.com/backdrop-contrib/stanford_decanter/edit/main/docs/styles.md)
+
+## Responsive Breakpoints
+
+- `xs`: 0 - 575px
+- `sm`: 576 - 767px
+- `md`: 768 - 991px
+- `lg`: 992 - 1199px
+- `xl`: 1200 - 1499px
+- `2xl`: 1500px and up
diff --git a/profiles/decanter_profile/config/layout.layout.home.json b/profiles/decanter_profile/config/layout.layout.home.json
@@ -30,7 +30,7 @@
             "fe8c7715-c7e9-46d0-8b09-09afb78b2891"
         ],
         "content": [
-            "578243cf-a4c8-46ad-9504-04aaf4ec9ccc"
+            "9fe1b296-5138-4b95-b000-d781ac220b9b"
         ],
         "sidebar": [],
         "sidebar2": [],
@@ -223,30 +223,24 @@
                 }
             }
         },
-        "578243cf-a4c8-46ad-9504-04aaf4ec9ccc": {
-            "plugin": "views:promoted-block",
+        "9fe1b296-5138-4b95-b000-d781ac220b9b": {
+            "plugin": "layout:custom_block",
             "data": {
                 "status": 1,
-                "module": "views",
-                "delta": "promoted-block",
+                "module": "layout",
+                "delta": "custom_block",
                 "settings": {
-                    "link_to_view": null,
-                    "more_link": false,
-                    "use_pager": true,
-                    "pager_id": 0,
-                    "items_per_page": 10,
-                    "offset": 0,
-                    "path": "rss.xml",
-                    "fields_override": null,
                     "title_display": "default",
                     "title": "",
                     "style": "default",
                     "block_settings": [],
                     "contexts": [],
-                    "allowed": [],
-                    "path_override": false
+                    "content": "<p class=\"text-align-justify\" style=\"-webkit-text-stroke-width:0px;caret-color:rgb(0, 0, 0);color:rgb(0, 0, 0);font-family:&quot;Open Sans&quot;, Arial, sans-serif;font-size:14px;font-style:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;margin:0px 0px 15px;orphans:auto;padding:0px;text-decoration:none;text-indent:0px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;\">\r\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut metus arcu. Aliquam commodo augue in porttitor malesuada. Ut felis urna, tincidunt in maximus vel, molestie non orci. Donec quis interdum velit. Nullam fermentum lectus orci, ac convallis turpis congue non. Fusce ut ullamcorper leo. Etiam vitae lacinia leo. Etiam non sagittis nunc. Aenean at maximus libero.\r\n</p>",
+                    "format": "content_editor_text_format",
+                    "admin_label": "",
+                    "admin_description": ""
                 },
-                "uuid": "578243cf-a4c8-46ad-9504-04aaf4ec9ccc",
+                "uuid": "9fe1b296-5138-4b95-b000-d781ac220b9b",
                 "style": {
                     "plugin": "default",
                     "data": {

diff --git a/src/main.css b/src/main.css
@@ -214,7 +214,7 @@ html .layout {
 
 .col-full
 {
-  @apply col-span-1 md:col-span-6 lg:col-span-12;
+  @apply col-span-1 sm:col-span-4 md:col-span-6 lg:col-span-12
 }
 
 .col-twothird