css - Magento 2.4.7-p3: Media Query Priority Issue with .media-width() in LESS - Stack Overflow

Magento 2.4.7-p3: Media Query Priority Issue with .media-width() in LESS

After upgrading Magento to 2.4.7-p3, I encountered a CSS priority issue on mobile devices when using Magento's built-in .media-width() mixin in LESS.

Issue:

When writing media queries using Method 1, styles do not get applied correctly on mobile:

Method 1 (Using Magento's .media-width() mixin)

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { /* Styles here */ }

However, when using Method 2, everything works fine:

Method 2 (Using standard @media query)

@media (max-width: 1023px) { /* Styles here */ }

Observations:

• The issue occurs after upgrading to Magento 2.4.7-p3.

• Magento’s .media-width() mixin does not seem to be applying styles properly, possibly due to how it generates media queries.

• Using standard @media queries works as expected.

Question:

1. Has anyone else experienced this issue after upgrading to 2.4.7-p3?

2. Is there a fix or recommended approach to ensure .media-width() works correctly without priority issues?

3. Should I avoid using .media-width() in Magento 2.4.7-p3 and rely on standard media queries instead?

Any insights would be greatly appreciated!