I'm not a strong coder, and am having a media queries syntax issue I could really use some help with. I found a query specifically for high dpi devices, and want to use it to display a different graphic if the devices dpi is high enough. However I also want this query to work only if the screen is below a specific max-width, and that's what I'm having trouble adding to it. Below is what I've been trying (so last line is added by me), but it isn’t working. Any help is greatly appreciated!
@media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi),
and (max-width: 48em)@media
only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 48em),
only screen and ( min--moz-device-pixel-ratio: 1.3) and (max-width: 48em),
only screen and ( -o-min-device-pixel-ratio: 13/10) and (max-width: 48em),
only screen and ( min-device-pixel-ratio: 1.3) and (max-width: 48em),
only screen and ( min-resolution: 120dpi) and (max-width: 48em)
{
/* Bla bla Bla bla**/
}