responsive: fixed the grid for small screens

web/themes/custom/materiotheme/assets/dist/main.css

@@ -19231,7 +19231,10 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
 
 header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
   margin: 0 auto; }
-  @media only screen and (max-width: 436px) {
+  @media only screen and (max-width: 218px) {
+    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+      width: 218px; } }
+  @media only screen and (min-width: 437px) and (max-width: 654px) {
     header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 436px; } }
   @media only screen and (min-width: 655px) and (max-width: 872px) {
@@ -19553,7 +19556,8 @@ header[role="banner"] {
           z-index: 90;
           text-align: right; } }
   header[role="banner"] #block-languageswitcher {
-    text-align: right; }
+    text-align: right;
+    position: relative; }
     header[role="banner"] #block-languageswitcher h2 {
       margin: 0.1em 0 0 0;
       font-size: 0.756em;

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -75,11 +75,12 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   margin:0 auto;
   $m: $column_goutiere;
   $colw: $column_width;
-  $bp: ($colw + $m) * 2;
-  $i: 2;
+  // $bp: ($colw + $m) * 2;
+  $bp: $colw + $m;
+  $i: 1;
   @while  $bp < 4096px {
     $upbp: $bp + $colw + $m;
-    @if $i == 2 {
+    @if $i == 1 {
       @media only screen and (max-width: $bp) {
         width:$bp;
       }