2

In magento2, desktop view comes from media point 768. i want to change this view. Rather than 768 my desktop view should start from 992. For that i am overritting the value of @screen__m from 768 to 992. But my changes are not reflecting. What are the other changes which i need to make ? Any solution ?

3 Answers 3

1

This would not be a good practice to perform changes directly on to core files of Magento. I would suggest you to create your own theme followed by any of the Magento's default theme. For that please follow below steps:

  1. Add your theme under app/design/frontend/{Namesapce}/{theme-name} Below URL would give you proper overview about creating theme in Magento2

URL: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

Here you can add your own custom.less file with custom width variable i.e @cutom_desktop_width: 992 and based on that you can write your own required conditions:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ccf;
    }
    .example-responsive-block:before {
        content: 'Desktop styles ';
        font-weight: bold;
    }
}

Reference URL : http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html

2
  • the suggested approach in the link devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/… (1) works in developer mode but not in production mode (rage) >:(
    – OZZIE
    Sep 7, 2016 at 9:44
  • it was somehow to do with specificity and the load order of the css, only on tablet the theme was loading before the magento/module files
    – OZZIE
    Sep 7, 2016 at 12:05
1

If you just need to create a few customer changes, you can add those in a custom.less file, but it seems like you want to do a global change of the site's break points.

Take a look at this page on the Magento 2 Docs that goes over the process of overriding the _responsive.less file. Because all the .less files in the site inherit from this files variable definition, you can define a new break point once and every file that uses that break point will be updated.

You still have to create a theme to house these files, and Akshay Jindal's link will show you how to do that.

0

the only things you have to do is do it:

  1. Add _theme.less in your theme /app/design/frontend/YourVENDOR/YourTeme/web/css/source/_theme.less

  2. Run grunt clean and grunt exec for republis symlinks to the source files, then run grunt watch for track the changes and compilation CSS

  3. Add @screen__m: 992px; variable in your _theme.less

Good luck! :)

See more on Magento Documentation Grunt

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.