diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
index 76302af99c6..ba9f8e5b60c 100644
--- a/app/javascript/styles/_mixins.scss
+++ b/app/javascript/styles/_mixins.scss
@@ -31,4 +31,4 @@
   .multi-columns #{$parent} {
     @content;
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 1fa20a7312b..54a44937e82 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1330,7 +1330,7 @@
   position: relative;
 }
 
-@include multi-columns('screen and (min-width: 360px)', $parent: null) {
+@media screen and (min-width: 360px) {
   .columns-area {
     padding: 10px;
   }
@@ -1386,7 +1386,7 @@
   }
 }
 
-@include multi-columns('screen and (min-width: 360px)', $parent: null) {
+@media screen and (min-width: 360px) {
   .tabs-bar {
     margin: 10px;
     margin-bottom: 0;
@@ -1557,7 +1557,7 @@
   }
 }
 
-@include multi-columns('screen and (min-width: 600px)', $parent: null) {
+@media screen and (min-width: 600px) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -3090,7 +3090,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@include single-column('screen and (max-width: 550px)', $parent: null) {
+@media screen and (max-width: 550px) {
   .onboarding-modal {
     width: 100%;
     height: 100%;
@@ -3226,7 +3226,7 @@ button.icon-button.active i.fa-retweet {
   margin-right: 15px;
 }
 
-@include single-column('screen and (max-width: 400px)', $parent: null) {
+@media screen and (max-width: 400px) {
   .onboarding-modal__page-one {
     flex-direction: column;
   }
@@ -3301,7 +3301,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
+@media screen and (max-width: 320px) and (max-height: 600px) {
   .onboarding-modal__page p {
     font-size: 14px;
     line-height: 20px;