0

We have extended basic Magento Luma theme. Currently, we are working on the compatibility of the site in various browsers.

I have read many posts regarding media query using on Magento. Below is for your view.

//
//  Common (Both desktop and mobile)
//  _____________________________________________
& when (@media-common = true) {

}


//
//  Mobile
//  _____________________________________________

.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) {

}

Now my question is the below one works for all the mobiles like iPhones and Android:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m)

or do I need to target specific devices like below:

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

Because in my case the CSS only works when I target specific devices.

Could anyone please help me to understand?

0

yes you can add your custom devices in extended less file & it will work no issue in it. Only need to verify you have to extend correctly. like i gave a lot of in my custom theme custom less file:

@media only screen and (min-width: 32.5em) {
    .review-item__name {
        display: block;
        margin: 0 0 0.52632em 0;
    }
}
@media only screen and (max-width: 41.8125em) {
    .review-item .rating-box .icon {
        margin-right: 0.25em;
        width: 0.875em;
        height: 0.8125em;
    }
}

Your Answer

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

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