CODEWITHSUNDEEP
css
John
John

Reputation: 13729

CSS Media Queries not working in Firefox and Chrome

One of my clients has a site with a responsive design (three based on ranges) with so many graphics they do have to reduce them for each range. We don't detect by device or anything silly though I do need to define with CSS profiles that I can later read with JavaScript as there are things we have to go out of our way and style with both JavaScript/CSS though because the background-image moves based on the "profile" the calculations have to be based off of which media query is in effect.

Unfortunately both Firefox and Chrome are acting a bit wonky when it comes to which profile is "active". The client considers 640 pixels or less to be a "phone" device, 641 ~ 991 a "tablet" device and 992 pixels and greater to be a "desktop" device. I've managed to improve a few things though I haven't figured out why "tablet" isn't working on Firefox and why both "phone" and "tablet" don't work on Chrome?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<style type="text/css">
@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}
@media (min-width: 641px) and (min-width: 991px) {
    h1::before {content: 'Tablet ';}
}
@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}
</style>
</head>

<body>

<h1>Profile</h1>

</body>
</html>

Upvotes: 0

Views: 2282

Answers (3)

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}
@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}
@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}
</style>
</head>

<body>

<h1>Profile</h1>

</body>
</html>

Upvotes: 0

Kaan Burak Sener
Kaan Burak Sener

Reputation: 994

Your mistake is using two min-widths accidentally. Please try this.

@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}

@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}

@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}

Upvotes: 1

APAD1
APAD1

Reputation: 13666

Your media queries are working fine for me in both Chrome and Firefox, the only issue is the tablet breakpoint because you put min-width twice instead of max-width. Just change it to:

@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}

JSFiddle

Upvotes: 1

Related Questions