I have been working on the compatibility of our client site but I'm really confused in writing media query for mobiles. The thing is that I have read in Magento devdocs and also many posts regarding writing the media query for mobiles.

They are all saying, we have to use the below media queries on which screen size we’d like to target

// Common
// (for styles used in both mobile and desktop views)
& when (@media-common = true) {}

// Mobile
// (for all mobile styles.)
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {}

// Tablet
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

// Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {}

However, I have used the below media query but it's not working on all mobiles.

// Mobile
    // (for all mobile styles.)
    .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {}

Do I need to target a specific device resolution as below:

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {


Please guide me on how to write media query for mobiles which applies to all the mobiles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.