Mobile Responsive React Page in 30 sec's using SCSS

Mobile responsiveness is one of that annoying jobs which developers needs to do but still procrastinates. Also this is same reason why UI/UX libraries gets boost amongst beginners. Now although it a good thing, but at the same time it not worth it since we gain nothing!

Hence the trick which I'm gonna share can be used in react projects via declaring a global variable of styles using SCSS and then applying them over all Styles

Step 1- Global SCSS:

Code:

$width:768px;

@mixin mobile {
    @media(max-width: #{$width}){
        @content
    }
}

As we can see that the global.scss is initialized with width as a variable. This width denotes the size after which our Mobile elements shall come into use(or start working).

Step 2 - Implement and use:

Code:

@import "../../global.scss";

.intro{
    background-color: blue;
    display: flex;

    @include mobile{
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
}

Now here once we implement the global variable in local styles, we can directly use @include mobile from the Global variable and write our adjustments for the section.

And with this we have implemented a better Mobile Responsive Code within No time spend.

Thank You for reading. Peace!