CODEWITHSUNDEEP
cssthemesmagento2
Pranav Patel
Pranav Patel

Reputation: 154

Override default breakpoints in Magento2

I want to override default breakpoints in magento2 css. suggest any ideas how to do this?

E.g. in magento2 default breakpoints are 

@screen__xxs: 320px;

@screen__xs: 480px;

@screen__s: 640px;

@screen__m: 768px;

@screen__l: 1024px;

@screen__xl: 1440px;

I want to override them by 

@screen__xxs: 320px;

@screen__xs: 479px;

@screen__s: 767px;

@screen__m: 991px;

@screen__l: 1440px;

@screen__xl: 2150px;

On Devdocs magento I found the way to add new but failed to override existing alls.

Upvotes: 0

Views: 1059

Answers (1)

Arsalan
Arsalan

Reputation: 128

Inside your theme create a file under following directory structure:
<Namespace>/<Theme>/web/css/source/lib/variables/_responsive.less
Now here add your custom variables:

@screen__xxs: 320px;

@screen__xs: 479px;

@screen__s: 767px;

@screen__m: 991px;

@screen__l: 1440px;

@screen__xl: 2150px;

This file would override the default magento variables. Hence you would have customized breakpoints. On deployment the directory would be created:
pub/static/frontend/<Namespace>/<ThemeName>/en_US/css/source/lib/variables/_responsive.less
And you would see the default breakpoints are overridden.

Upvotes: 3

Related Questions