Magento 2.3.5-p1 - CSS/LESS and .media-width problem/question

[aglasser1]

I have HTML:

<div class="test_div_one">
<a href="https://somesite.com" class="test_a_one">
<img src="{{view url="images/test_image_one.jpg"}}" alt="test image one" />
<span class="test_inlay_one">
<strong class="test_inlay_text">test inlay text</strong>
<span class="test_inlay_button">test inlay button</span>
</span>
</a>
</div>

I have CSS/LESS:

.test_inlay_one {top: 40px; right: 40px; width: 30%; }
.test_div_one a img { margin-left: 50px; }

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.test_inlay_one { top: 230px; right: 10px; width: 85%; }
.test_div_one a img { margin-left: -150px; }
}

When testing on mobile, the class ".test_div_one a img { margin-left: -150px; }"

works just fine when switching to a mobile view. However, the .test_inlay_one { top: 230px; right: 10px; width: 85%; } is not recognized. Am I missing something about how this works?

[gaurav_harsh1]

Hi @aglasser1 

I tried the same CSS, but 

.test_div_one a img { margin-left: -150px; }

this is also not working for me in mobile view.

and CSS should be applied on Desktop and Mobile like this :

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .test_inlay_one {top: 40px; right: 40px; width: 30%; }
    .test_div_one a img { margin-left: 50px; }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.test_inlay_one { top: 230px; right: 10px; width: 85%; }
.test_div_one a img { margin-left: -150px; }
}

Check the documentation CSS in responsive design :

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html