converted responsive to @include col-mediaquery-max(3)

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

@@ -19352,7 +19352,7 @@ header[role="banner"] {
   header[role="banner"] #block-sitebranding h1 {
     margin: 0;
     line-height: 1; }
-  @media (max-width: 375px) {
+  @media (max-width: 436px) {
     header[role="banner"] #block-sitebranding .slogan {
       display: none; } }
   header[role="banner"] #block-socialmedialinks {
@@ -19361,7 +19361,7 @@ header[role="banner"] {
     margin-right: 0.5em; }
     header[role="banner"] #block-socialmedialinks li {
       padding: 0; }
-    @media (max-width: 375px) {
+    @media (max-width: 654px) {
       header[role="banner"] #block-socialmedialinks {
         display: none; } }
   header[role="banner"] #block-userlogin {
@@ -19436,7 +19436,7 @@ header[role="banner"] {
     padding-top: 0.06em; }
     header[role="banner"] #user-tools a.mdi-account {
       cursor: pointer; }
-      @media (max-width: 375px) {
+      @media (max-width: 654px) {
         header[role="banner"] #user-tools a.mdi-account span {
           display: none; } }
     header[role="banner"] #user-tools .mdi-logout::before {
@@ -19453,7 +19453,7 @@ header[role="banner"] {
       cursor: pointer; }
       header[role="banner"] #user-flags h2:before {
         padding-right: 0.2em; }
-      @media (max-width: 375px) {
+      @media (max-width: 654px) {
         header[role="banner"] #user-flags h2 span {
           display: none; } }
     header[role="banner"] #user-flags ul {
@@ -19529,12 +19529,12 @@ header[role="banner"] {
       margin: 0; }
       header[role="banner"] #block-header ul.menu li {
         padding: 0; }
-    @media (min-width: 1080px) {
+    @media (max-width: 654px) {
       header[role="banner"] #block-header ul.menu li {
         display: inline-block; }
         header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
           margin-left: 0.5em; } }
-    @media (max-width: 375px) {
+    @media (max-width: 654px) {
       header[role="banner"] #block-header {
         position: relative;
         /* Toggle Show/Hide Menu */ }
@@ -19557,7 +19557,8 @@ header[role="banner"] {
           text-align: right; } }
   header[role="banner"] #block-languageswitcher {
     text-align: right;
-    position: relative; }
+    position: relative;
+    padding-right: 3px; }
     header[role="banner"] #block-languageswitcher h2 {
       margin: 0.1em 0 0 0;
       font-size: 0.756em;

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

@@ -1,13 +1,16 @@
-// iphone 6/7/8
-@mixin responsive-mediaquery-phone() {
-  @media (max-width: 375px) {
-    @content;
-  }
-}
+// use @include col-mediaquery-max(3) instead of below
 
 
-@mixin responsive-mediaquery-desktop() {
-  @media (min-width: 1080px) {
-    @content;
-  }
-}
+// iphone 6/7/8
+// @mixin responsive-mediaquery-phone() {
+//   @media (max-width: 375px) {
+//     @content;
+//   }
+// }
+//
+//
+// @mixin responsive-mediaquery-desktop() {
+//   @media (min-width: 1080px) {
+//     @content;
+//   }
+// }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -9,7 +9,7 @@ $mdi-font-path: './mdi/fonts/';
 @import './base/layout';
 @import './base/animations';
 @import './base/fonts';
-@import './base/responsive';
+// @import './base/responsive';
 
 html{
   // background-color: red;
@@ -53,7 +53,7 @@ header[role="banner"]{
     }
     .slogan{
 
-      @include responsive-mediaquery-phone(){
+      @include col-mediaquery-max(2){
         display:none;
       }
     }
@@ -66,7 +66,7 @@ header[role="banner"]{
     li{
       padding:0;
     }
-    @include responsive-mediaquery-phone(){
+    @include col-mediaquery-max(3){
       display:none;
     }
   }
@@ -175,7 +175,7 @@ header[role="banner"]{
       @extend %header-fs;
       cursor: pointer;
       span{
-        @include responsive-mediaquery-phone(){
+        @include col-mediaquery-max(3){
           display:none;
         }
       }
@@ -199,7 +199,7 @@ header[role="banner"]{
       cursor: pointer;
       &:before{padding-right: 0.2em;}
       span{
-        @include responsive-mediaquery-phone(){
+        @include col-mediaquery-max(3){
           display:none;
         }
       }
@@ -313,7 +313,7 @@ header[role="banner"]{
         }
       }
     }
-    @include responsive-mediaquery-desktop(){
+    @include col-mediaquery-max(3){
       ul.menu{
         li{
           display: inline-block;
@@ -323,7 +323,7 @@ header[role="banner"]{
         }
       }
     }
-    @include responsive-mediaquery-phone(){
+    @include col-mediaquery-max(3){
       position: relative;
 
       label[for="block-header-menu"]{
@@ -351,6 +351,7 @@ header[role="banner"]{
   #block-languageswitcher{
     text-align: right;
     position: relative;
+    padding-right: 3px;
     h2{
       margin: 0.1em 0 0 0;
       font-size: 0.756em;
@@ -419,6 +420,7 @@ header[role="banner"]{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
     #block-pagetitle{}
     #block-materiosapisearchblock{
       align-self: flex-end;
@@ -429,7 +431,9 @@ header[role="banner"]{
       #block-pagetitle{
         width: max-content;
       }
-      #block-materiosapisearchblock{}
+      #block-materiosapisearchblock{
+
+      }
     }
 
   }