0

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.

  • try the below given answer, and provide your feedback – Kanhaiya lal Apr 21 '18 at 17:09
2

In magento 2.x, overriding variables, we can do in many place.

But recommended way fpr override variables in _theme.less, so it will apply to entire theme

app\design\frontend[VENDOR][THEME]\web\css\source_theme.less

And Note

Best Practices Says add comments for future re-use or easy to understand code

so in _theme.less at the begin add below code or add your code as you wish.

//
//  Responsive variables
//  _____________________________________________

@screen__xxs: 320px;

@screen__xs: 479px;

@screen__s: 767px;

@screen__m: 991px;

@screen__l: 1440px;

@screen__xl: 2150px;

After adding your changes to _theme.less do below steps.

  1. Clear pub/static/* in static folder clear all except .httaccess

  2. Clear var/* in var folder clear all except .httaccess

  3. Deploy the static content : php bin/magento setup:static-content:deploy -f , In developer mode you can't deploy without adding -f in command

& after deploy, See store front you will achieve your desired output.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.