Ttdfjt

'sudo apt-get update' get a warning

First amendment and employment: Can an employer terminate you for speech?

When do triples have been called monads for the first time?

Is it incorrect to write "I rate this book a 3 out of 4 stars?"

What is my malfunctioning AI harvesting from humans?

Infeasibility in mathematical optimization models

Is refreshing multiple times a test case for web applications?

Write an interpreter for *

Plausibility of Ice Eaters in the Arctic

Why does Intel's Haswell chip allow FP multiplication to be twice as fast as addition?

Best gun to modify into a monsterhunter weapon?

Non-OR journals which regularly publish OR research

How would I as a DM create a smart phone-like spell/device my players could use?

Why did the RAAF procure the F/A-18 despite being purpose-built for carriers?

English - Acceptable use of parentheses in an author's name

Drawing complex inscribed and circumscribed polygons in TikZ

Why doesn't the "ch" pronunciation rule occur for words such as "durch" and "manchmal"?

Can I call myself an assistant professor without a PhD?

Why level 0 espers are considered espers if they have no powers at all?

Word or idiom defining something barely functional

In a topological space if there exists a loop that cannot be contracted to a point does there exist a simple loop that cannot be contracted also?

Why did Gandalf use a sword against the Balrog?

Author changing name

Accidentals - some in brackets, some not

Magento 2 extend styles-m.less

Magento, RWD, Form Styles, and Dynamic ContentCE 1.9.2.1 - Extend RWD Menustyles are not applied Custom theme is copied to rwd/defaultOverriding Blank Theme Styles in Magento 2Why styles are not getting applies when edited in magento2Extend part .less fileCustom styles not work in new theme Magento 2Magento media queries in platform-Responsive emailsMagento 2.2.5 styles-m.css and styles-l.css not loadM2 css/less priorities

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.example_elementwidht:200px;

The code from media query is always overwritten by code below. I'm writing this code in my _theme.less file and it ends up in style-m.css. Yes I can use !important - but that is not the idea. I would like to know where do I need to write my responsive css / less code in order to work properly.

Thank you!

magento2 layout less rwd

share|improve this question

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

add a comment | 

0

I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.example_elementwidht:200px;

The code from media query is always overwritten by code below. I'm writing this code in my _theme.less file and it ends up in style-m.css. Yes I can use !important - but that is not the idea. I would like to know where do I need to write my responsive css / less code in order to work properly.

Thank you!

magento2 layout less rwd

share|improve this question

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

add a comment | 

I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.example_elementwidht:200px;

The code from media query is always overwritten by code below. I'm writing this code in my _theme.less file and it ends up in style-m.css. Yes I can use !important - but that is not the idea. I would like to know where do I need to write my responsive css / less code in order to work properly.

Thank you!

magento2 layout less rwd

share|improve this question

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.example_elementwidht:200px;

share|improve this question

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

share|improve this question

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

edited Jul 31 at 4:42

Mohit Rane

1,2091818 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

asked Dec 5 '16 at 14:52

Filip Kunjadić - ĆulibrkFilip Kunjadić - Ćulibrk

1633 bronze badges

2 Answers
2

active

oldest

votes

0

Try this

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_elementwidht:200px;

share|improve this answer

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

add a comment | 

0

This goes in style-m.css, that generates the common and mobile styles

& when (@media-common = true) 
 .example_element
 width:100px;
 

This goes in style-l.css, that generates the desktop styles (Up to 768px)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_element
 width:200px;
 
 

The mobile first approach is better so mobile devices don't even load the desktop styles.

Here the doc

share|improve this answer

edited Feb 5 '17 at 23:02

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f148905%2fmagento-2-extend-styles-m-less%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try this

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_elementwidht:200px;

share|improve this answer

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

add a comment | 

0

Try this

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_elementwidht:200px;

share|improve this answer

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

add a comment | 

Try this

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_elementwidht:200px;

share|improve this answer

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) 
 .example_elementwidth:100px;

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_elementwidht:200px;

share|improve this answer

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

answered Feb 5 '17 at 20:47

JanuszJanusz

1844 bronze badges

0

This goes in style-m.css, that generates the common and mobile styles

& when (@media-common = true) 
 .example_element
 width:100px;
 

This goes in style-l.css, that generates the desktop styles (Up to 768px)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_element
 width:200px;
 
 

The mobile first approach is better so mobile devices don't even load the desktop styles.

Here the doc

share|improve this answer

edited Feb 5 '17 at 23:02

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

add a comment | 

0

This goes in style-m.css, that generates the common and mobile styles

& when (@media-common = true) 
 .example_element
 width:100px;
 

This goes in style-l.css, that generates the desktop styles (Up to 768px)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_element
 width:200px;
 
 

The mobile first approach is better so mobile devices don't even load the desktop styles.

Here the doc

share|improve this answer

edited Feb 5 '17 at 23:02

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

add a comment | 

This goes in style-m.css, that generates the common and mobile styles

& when (@media-common = true) 
 .example_element
 width:100px;
 

This goes in style-l.css, that generates the desktop styles (Up to 768px)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_element
 width:200px;
 
 

The mobile first approach is better so mobile devices don't even load the desktop styles.

Here the doc

share|improve this answer

edited Feb 5 '17 at 23:02

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

& when (@media-common = true) 
 .example_element
 width:100px;
 

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) 
 .example_element
 width:200px;
 
 

share|improve this answer

edited Feb 5 '17 at 23:02

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges

answered Feb 5 '17 at 22:49

nuovecodenuovecode

48544 silver badges1414 bronze badges