Fix for small mobile screens

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -1157,6 +1157,186 @@ button:hover {
   .lg-min-h-250 {
     min-height: 250px; } }
 
+.w-275 {
+  width: 275px; }
+
+.max-w-275 {
+  max-width: 275px; }
+
+.min-w-275 {
+  min-width: 275px; }
+
+.h-275 {
+  height: 275px; }
+
+.max-h-275 {
+  max-height: 275px; }
+
+.min-h-275 {
+  min-height: 275px; }
+
+@media (max-width: 600px) {
+  .sm-w-275 {
+    width: 275px; }
+  .sm-max-w-275 {
+    max-width: 275px; }
+  .sm-min-w-275 {
+    min-width: 275px; }
+  .sm-h-275 {
+    height: 275px; }
+  .sm-max-h-275 {
+    max-height: 275px; }
+  .sm-min-h-275 {
+    min-height: 275px; } }
+
+@media (min-width: 600px) and (max-width: 992px) {
+  .md-w-275 {
+    width: 275px; }
+  .md-max-w-275 {
+    max-width: 275px; }
+  .md-min-w-275 {
+    min-width: 275px; }
+  .md-h-275 {
+    height: 275px; }
+  .md-max-h-275 {
+    max-height: 275px; }
+  .md-min-h-275 {
+    min-height: 275px; } }
+
+@media (min-width: 992px) {
+  .lg-w-275 {
+    width: 275px; }
+  .lg-max-w-275 {
+    max-width: 275px; }
+  .lg-min-w-275 {
+    min-width: 275px; }
+  .lg-h-275 {
+    height: 275px; }
+  .lg-max-h-275 {
+    max-height: 275px; }
+  .lg-min-h-275 {
+    min-height: 275px; } }
+
+.w-280 {
+  width: 280px; }
+
+.max-w-280 {
+  max-width: 280px; }
+
+.min-w-280 {
+  min-width: 280px; }
+
+.h-280 {
+  height: 280px; }
+
+.max-h-280 {
+  max-height: 280px; }
+
+.min-h-280 {
+  min-height: 280px; }
+
+@media (max-width: 600px) {
+  .sm-w-280 {
+    width: 280px; }
+  .sm-max-w-280 {
+    max-width: 280px; }
+  .sm-min-w-280 {
+    min-width: 280px; }
+  .sm-h-280 {
+    height: 280px; }
+  .sm-max-h-280 {
+    max-height: 280px; }
+  .sm-min-h-280 {
+    min-height: 280px; } }
+
+@media (min-width: 600px) and (max-width: 992px) {
+  .md-w-280 {
+    width: 280px; }
+  .md-max-w-280 {
+    max-width: 280px; }
+  .md-min-w-280 {
+    min-width: 280px; }
+  .md-h-280 {
+    height: 280px; }
+  .md-max-h-280 {
+    max-height: 280px; }
+  .md-min-h-280 {
+    min-height: 280px; } }
+
+@media (min-width: 992px) {
+  .lg-w-280 {
+    width: 280px; }
+  .lg-max-w-280 {
+    max-width: 280px; }
+  .lg-min-w-280 {
+    min-width: 280px; }
+  .lg-h-280 {
+    height: 280px; }
+  .lg-max-h-280 {
+    max-height: 280px; }
+  .lg-min-h-280 {
+    min-height: 280px; } }
+
+.w-290 {
+  width: 290px; }
+
+.max-w-290 {
+  max-width: 290px; }
+
+.min-w-290 {
+  min-width: 290px; }
+
+.h-290 {
+  height: 290px; }
+
+.max-h-290 {
+  max-height: 290px; }
+
+.min-h-290 {
+  min-height: 290px; }
+
+@media (max-width: 600px) {
+  .sm-w-290 {
+    width: 290px; }
+  .sm-max-w-290 {
+    max-width: 290px; }
+  .sm-min-w-290 {
+    min-width: 290px; }
+  .sm-h-290 {
+    height: 290px; }
+  .sm-max-h-290 {
+    max-height: 290px; }
+  .sm-min-h-290 {
+    min-height: 290px; } }
+
+@media (min-width: 600px) and (max-width: 992px) {
+  .md-w-290 {
+    width: 290px; }
+  .md-max-w-290 {
+    max-width: 290px; }
+  .md-min-w-290 {
+    min-width: 290px; }
+  .md-h-290 {
+    height: 290px; }
+  .md-max-h-290 {
+    max-height: 290px; }
+  .md-min-h-290 {
+    min-height: 290px; } }
+
+@media (min-width: 992px) {
+  .lg-w-290 {
+    width: 290px; }
+  .lg-max-w-290 {
+    max-width: 290px; }
+  .lg-min-w-290 {
+    min-width: 290px; }
+  .lg-h-290 {
+    height: 290px; }
+  .lg-max-h-290 {
+    max-height: 290px; }
+  .lg-min-h-290 {
+    min-height: 290px; } }
+
 .w-300 {
   width: 300px; }
 

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss

@@ -1,6 +1,6 @@
 /* WIDTH */ 
 
-$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);
+$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 275, 280, 290, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);
 
 @each $width in $widthvalues {
     .w-#{$width} {

themes/coopgo-theme/layouts/index.html

@@ -33,16 +33,16 @@
         {{ end }}
     </div>
 </div>
-<div class="p-30">
+<div class="p-30 content">
     <h1 class="container ta-c brandblue">{{ .Site.Params.Section3.Title }}</h1>
-    <div class="container flex-row wrap j-center">
+    <div class="container flex-row wrap j-center w-full">
     {{ range .Site.Params.Section3.List }}
-        <div class="container min-w-400 max-w-400 m-20 flex-1 flex-row ai-center {{ if (eq .side "right") }} direction-row-reverse{{end}}">
+        <div class="container max-w-400 m-20 flex-1 flex-row wrap ai-center j-center w-full {{ if (eq .side "right") }} direction-row-reverse{{end}}">
             <div class="bg-{{.color}} bg-bubble icon-bubble w-75 h-75 m-20">
                 {{ $icon := resources.Get ( print "images/icons/" .icon ".svg") }}
                 <img src="{{ $icon.Permalink }}" />
             </div>
-            <div class="flex-1">
+            <div class="flex-1 min-w-250 w-300">
                 <h2 class="m-b-0 {{.color}} {{ if (eq .side "right") }} ta-r{{end}}">{{.title}}</h2>
                 <p class="m-t-0 ta-j">{{.description}}</p>
             </div>