Mixing
Only one css media query affects element's style (only happens with Chrome, not Firefox)
I cannot figure out why only one of these two media queries works.
This is my code
/* Desktop screen code ... */
/* media queries start */
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
Only the first query (i.e. for width between 751px and 1024px) works, and I get the same result even if I swap the order of the queries or comment out the first one (in this latter case the second query simply does affect the element).
This is getting a bit frustrating and I am pretty sure this must be due to me not seeing a pretty obvious error, so I'm ready (and happy) to be enlightened here.
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04.
css media-queries
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
add a comment |
I cannot figure out why only one of these two media queries works.
This is my code
/* Desktop screen code ... */
/* media queries start */
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
Only the first query (i.e. for width between 751px and 1024px) works, and I get the same result even if I swap the order of the queries or comment out the first one (in this latter case the second query simply does affect the element).
This is getting a bit frustrating and I am pretty sure this must be due to me not seeing a pretty obvious error, so I'm ready (and happy) to be enlightened here.
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04.
css media-queries
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, changemax-width: 750pxtomax-width: 7500pxjust to try it out.
– Rickard Elimää
Nov 13 '18 at 16:18
add a comment |
I cannot figure out why only one of these two media queries works.
This is my code
/* Desktop screen code ... */
/* media queries start */
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
Only the first query (i.e. for width between 751px and 1024px) works, and I get the same result even if I swap the order of the queries or comment out the first one (in this latter case the second query simply does affect the element).
This is getting a bit frustrating and I am pretty sure this must be due to me not seeing a pretty obvious error, so I'm ready (and happy) to be enlightened here.
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04.
css media-queries
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
I cannot figure out why only one of these two media queries works.
This is my code
/* Desktop screen code ... */
/* media queries start */
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
Only the first query (i.e. for width between 751px and 1024px) works, and I get the same result even if I swap the order of the queries or comment out the first one (in this latter case the second query simply does affect the element).
This is getting a bit frustrating and I am pretty sure this must be due to me not seeing a pretty obvious error, so I'm ready (and happy) to be enlightened here.
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04.
css media-queries
css media-queries
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
edited Nov 21 '18 at 17:45
Fede9390
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
asked Nov 13 '18 at 15:35
Fede9390Fede9390
12912
12912
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, changemax-width: 750pxtomax-width: 7500pxjust to try it out.
– Rickard Elimää
Nov 13 '18 at 16:18
add a comment |
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, changemax-width: 750pxtomax-width: 7500pxjust to try it out.
– Rickard Elimää
Nov 13 '18 at 16:18
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, change
max-width: 750px to max-width: 7500px just to try it out.– Rickard Elimää
Nov 13 '18 at 16:18
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, change
max-width: 750px to max-width: 7500px just to try it out.– Rickard Elimää
Nov 13 '18 at 16:18
add a comment |
4 Answers
4
active
oldest
votes
You forgot to close your first rule
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
} <----- This was missing
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
add a comment |
You have not closed the first media query. Check syntax 5 times before wasting time on stack :D
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
add a comment |
Have you tried changing both of the queries to
@media only screen and (max-width: 1024px) and (min-width: 751px) {
.element {
background-color: red;
}
@media only screen and (max-width: 750px) {
.element {
background-color: blue;
}
}
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
add a comment |
I resolved the issue in two different ways:
1) use min-device-width instead of min-width. However this meant that the media queries would not fire when I resized the browser's window on a computer
2) instert the tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of the html file. With this, everything works both on chrome and firefox
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284424%2fonly-one-css-media-query-affects-elements-style-only-happens-with-chrome-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
You forgot to close your first rule
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
} <----- This was missing
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
add a comment |
You forgot to close your first rule
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
} <----- This was missing
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
add a comment |
You forgot to close your first rule
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
} <----- This was missing
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
You forgot to close your first rule
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
} <----- This was missing
@media (max-width: 750px) {
.element {
background-color: blue;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>@media (min-width: 751px) and (max-width: 1024px) {
.element {
background-color: red;
}
}
@media (max-width: 750px) {
.element {
background-color: blue;
}
}<div class="element">
Test
</div>answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
edited Nov 13 '18 at 16:50
answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
answered Nov 13 '18 at 15:39
Itay GalItay Gal
8,11052560
8,11052560
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
add a comment |
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
You are right but unfortunately I did not make that mistake original code. I got the syntax wrong when writing the post but not in the css.
– Fede9390
Nov 13 '18 at 15:49
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 then update your post. it is still wrong
– fcalderan
Nov 13 '18 at 15:50
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
@Fede9390 The fixed code is working. You might have a different rule that overrides it. Please add the code that doesn't work, otherwise we can only guess.
– Itay Gal
Nov 13 '18 at 16:49
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
Edit 2: After additional testing I realized that the problem is present only on chrome (v70.0.3538.77) and not on firefox (v 63.0), running on Ubuntu 16.04. (updated my question accordingly)
– Fede9390
Nov 16 '18 at 12:17
add a comment |
You have not closed the first media query. Check syntax 5 times before wasting time on stack :D
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
add a comment |
You have not closed the first media query. Check syntax 5 times before wasting time on stack :D
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
add a comment |
You have not closed the first media query. Check syntax 5 times before wasting time on stack :D
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
You have not closed the first media query. Check syntax 5 times before wasting time on stack :D
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
answered Nov 13 '18 at 15:39
Robert ŞtefanRobert Ştefan
12
12
add a comment |
add a comment |
Have you tried changing both of the queries to
@media only screen and (max-width: 1024px) and (min-width: 751px) {
.element {
background-color: red;
}
@media only screen and (max-width: 750px) {
.element {
background-color: blue;
}
}
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
add a comment |
Have you tried changing both of the queries to
@media only screen and (max-width: 1024px) and (min-width: 751px) {
.element {
background-color: red;
}
@media only screen and (max-width: 750px) {
.element {
background-color: blue;
}
}
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
add a comment |
Have you tried changing both of the queries to
@media only screen and (max-width: 1024px) and (min-width: 751px) {
.element {
background-color: red;
}
@media only screen and (max-width: 750px) {
.element {
background-color: blue;
}
}
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
Have you tried changing both of the queries to
@media only screen and (max-width: 1024px) and (min-width: 751px) {
.element {
background-color: red;
}
@media only screen and (max-width: 750px) {
.element {
background-color: blue;
}
}
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
answered Nov 13 '18 at 15:41
Umair AkramUmair Akram
306
306
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
add a comment |
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
Just tried and nothing changes
– Fede9390
Nov 13 '18 at 15:50
add a comment |
I resolved the issue in two different ways:
1) use min-device-width instead of min-width. However this meant that the media queries would not fire when I resized the browser's window on a computer
2) instert the tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of the html file. With this, everything works both on chrome and firefox
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
add a comment |
I resolved the issue in two different ways:
1) use min-device-width instead of min-width. However this meant that the media queries would not fire when I resized the browser's window on a computer
2) instert the tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of the html file. With this, everything works both on chrome and firefox
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
add a comment |
I resolved the issue in two different ways:
1) use min-device-width instead of min-width. However this meant that the media queries would not fire when I resized the browser's window on a computer
2) instert the tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of the html file. With this, everything works both on chrome and firefox
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
I resolved the issue in two different ways:
1) use min-device-width instead of min-width. However this meant that the media queries would not fire when I resized the browser's window on a computer
2) instert the tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of the html file. With this, everything works both on chrome and firefox
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
answered Nov 21 '18 at 17:45
Fede9390Fede9390
12912
12912
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284424%2fonly-one-css-media-query-affects-elements-style-only-happens-with-chrome-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This appears to work just fine when I tested it using Codepen and Chrome's Dev tools :)
– C.RaysOfTheSun
Nov 13 '18 at 16:06
Just an idiot thought, but what's your screen resolution? If the 2nd one wont work, change
max-width: 750pxtomax-width: 7500pxjust to try it out.– Rickard Elimää
Nov 13 '18 at 16:18