0

I have:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    padding: 50 px;
}

Css looks: @media (min-width: 768px) { padding 50px }

Need make: @media (max-width: 1024px) { padding 10px } I try change style in app/design/frontend/Vendor/default/Magento_Theme/web/css/sourse/_module.less

3 Answers 3

4

There is lib/web/css/source/lib/_responsive.less. Define your screen variable in _theme.less in your theme. And copy this file into your theme dir in: web/css/source/lib/_responsive.less. Add your line in that file properly. The order matters.

I see now that you've asked for @screen_l: 1024px; variable which is already defined in lib/web/css/source/lib/variables/_responsive.less.

Try to put after:

@media only screen and (max-width: @screen__m) {
    .media-width('max', (@screen__m + 1));
}

This:

@media only screen and (max-width: @screen__l) {
    .media-width('max', (@screen__l));
    // or @screen_l + 1
}
2
  • Thanks! I need insert this code to _responsive.less or to file (where I make changes) _module.less?
    – Sylon
    Mar 19, 2017 at 10:43
  • In _responsive.less. You want to override the original _responsive.less into your theme folder where you copy this file and than modify it. And in your _module.less use your .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) { Mar 19, 2017 at 13:45
0

for those that want a super hacky way you can just add to the html head (content > configuration > edit default store view)

body{max-width 1024px;}
-3

I want to Add min-width:249px and max-width:449px css in less in Magento 2.0. How to do?

1
  • That's not an answer to this question it is rather a new question.
    – HelgeB
    Mar 15, 2019 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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