How to Add Custom Breakpoints in Magento 2

In this tutorial, Today I will explain to how to add custom breakpoints in Magento 2. In Magento 2, It’s provide many breakpoints by default. Instead of direct add breakpoints, You should create custom variable for that to manage standard for custom theme in Magento 2.

For ex :

@screen__xxs: 320px
@screen__xs: 480px
@screen__s: 640px
@screen__m: 768px
@screen__l: 1024px
@screen__xl: 1440px

You may also like this :

Now, If you want to add new breakpoints then, you need to follow below steps :

1) Let’s assume that you have created custom theme. Now, You need to add this below code in your app/design/frontend/VendorName/ThemeName/web/css/source/_variables.less file :

Copy Code


// custom breakpoints

@screen__ml: 979px;
@screen__xxl: 1920px;

2) Now, copy _responsive.less file from lib/web/css/source/lib/_responsive.less to app/design/frontend/VendorName/ThemeName/web/css/source/lib/ and use .media-width() mixin rule for add new custom breakpoint :

Copy Code


& when (@media-target = 'desktop'), (@media-target = 'all') {

    @media all and (min-width: @screen__ml) {
        .media-width('min', @screen__ml);
    }

    @media all and (min-width: @screen__xxl) {
        .media-width('min', @screen__xxl);
    }
}

After that, You can add a new .media-width() mixin rule where you need to use in your custom theme’s .less file.

Copy Code


.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__ml) {
    //  Add your custom less for @screen__ml breakpoint
}

Now, you just need to deploy your custom theme.

That’s it !!!

I hope this blog is easy to understand about how to add custom breakpoints in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Post Views: 2,393