Adding/Updating CSS in Magento

Question

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?

• Ronak Rathod: devdocs.magento.com/guides/v2.3/frontend-dev-guide/…

Answer 1

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;
 }
}