Css media query break on exact break point
up vote
-1
down vote
favorite
I have the following 2 media queries :
//for screen size = 1000px or greater
@media only screen and (min-width: 1000px) {
}
//for screen size = 999px or less
@media only screen and (max-width: 999px) {
}
the problem is when i resize the window to eaxct point of 1000px in chrome, the css style breaks.
it seems like min-wdith 1000px is working only for greater pixel widths but not at 1000px exactly, but it should apply the styles at exactly 1000px width as well right?
or am i missing something , please help
css media-queries
asked Nov 20 at 5:28
spark technology
11
|
show 12 more comments
up vote
-1
down vote
favorite
I have the following 2 media queries :
//for screen size = 1000px or greater
@media only screen and (min-width: 1000px) {
}
//for screen size = 999px or less
@media only screen and (max-width: 999px) {
}
the problem is when i resize the window to eaxct point of 1000px in chrome, the css style breaks.
it seems like min-wdith 1000px is working only for greater pixel widths but not at 1000px exactly, but it should apply the styles at exactly 1000px width as well right?
or am i missing something , please help
css media-queries
asked Nov 20 at 5:28
spark technology
11
1
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
do you have this meta:<meta name="viewport" content="width=device-width, initial-scale=1.0">in your<head>??
– לבני מלכה
Nov 20 at 5:35
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css://for screen size = 999px or less
– לבני מלכה
Nov 20 at 5:43
|
show 12 more comments
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I have the following 2 media queries :
//for screen size = 1000px or greater
@media only screen and (min-width: 1000px) {
}
//for screen size = 999px or less
@media only screen and (max-width: 999px) {
}
the problem is when i resize the window to eaxct point of 1000px in chrome, the css style breaks.
it seems like min-wdith 1000px is working only for greater pixel widths but not at 1000px exactly, but it should apply the styles at exactly 1000px width as well right?
or am i missing something , please help
css media-queries
asked Nov 20 at 5:28
spark technology
11
I have the following 2 media queries :
//for screen size = 1000px or greater
@media only screen and (min-width: 1000px) {
}
//for screen size = 999px or less
@media only screen and (max-width: 999px) {
}
the problem is when i resize the window to eaxct point of 1000px in chrome, the css style breaks.
it seems like min-wdith 1000px is working only for greater pixel widths but not at 1000px exactly, but it should apply the styles at exactly 1000px width as well right?
or am i missing something , please help
css media-queries
css media-queries
asked Nov 20 at 5:28
spark technology
11
asked Nov 20 at 5:28
spark technology
11
asked Nov 20 at 5:28
spark technology
11
asked Nov 20 at 5:28
spark technology
11
asked Nov 20 at 5:28
spark technology
11
11
1
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
do you have this meta:<meta name="viewport" content="width=device-width, initial-scale=1.0">in your<head>??
– לבני מלכה
Nov 20 at 5:35
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css://for screen size = 999px or less
– לבני מלכה
Nov 20 at 5:43
|
show 12 more comments
1
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
do you have this meta:<meta name="viewport" content="width=device-width, initial-scale=1.0">in your<head>??
– לבני מלכה
Nov 20 at 5:35
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css://for screen size = 999px or less
– לבני מלכה
Nov 20 at 5:43
1
1
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
do you have this meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>??– לבני מלכה
Nov 20 at 5:35
do you have this meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>??– לבני מלכה
Nov 20 at 5:35
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css:
//for screen size = 999px or less– לבני מלכה
Nov 20 at 5:43
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css:
//for screen size = 999px or less– לבני מלכה
Nov 20 at 5:43
|
show 12 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53386746%2fcss-media-query-break-on-exact-break-point%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
1
Make sure your browser is not zoomed
– Ramesh
Nov 20 at 5:31
@Ramesh it is not zoomed i checked
– spark technology
Nov 20 at 5:35
do you have this meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">in your<head>??– לבני מלכה
Nov 20 at 5:35
@לבנימלכה yes i do i just checked
– spark technology
Nov 20 at 5:38
jsfiddle.net/nt3mzL2e/1 : try to remove comment from css:
//for screen size = 999px or less– לבני מלכה
Nov 20 at 5:43