Showing and hiding divs using CSS @media query not working
When my browser is at greater than 300px width, my <div id="div1"> is hidden with display: none. However, if the browser screen is less than 300px width, it should be showing with display: inline-block.
Why isn't my <div id="div1"> showing up and displaying on-screen after I adjust the width of the browser less than 300px in my code below:
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>This JSFiddle offers a small results window where you can adjust the width of the window.
html css media-queries display
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
add a comment |
When my browser is at greater than 300px width, my <div id="div1"> is hidden with display: none. However, if the browser screen is less than 300px width, it should be showing with display: inline-block.
Why isn't my <div id="div1"> showing up and displaying on-screen after I adjust the width of the browser less than 300px in my code below:
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>This JSFiddle offers a small results window where you can adjust the width of the window.
html css media-queries display
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
add a comment |
When my browser is at greater than 300px width, my <div id="div1"> is hidden with display: none. However, if the browser screen is less than 300px width, it should be showing with display: inline-block.
Why isn't my <div id="div1"> showing up and displaying on-screen after I adjust the width of the browser less than 300px in my code below:
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>This JSFiddle offers a small results window where you can adjust the width of the window.
html css media-queries display
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
When my browser is at greater than 300px width, my <div id="div1"> is hidden with display: none. However, if the browser screen is less than 300px width, it should be showing with display: inline-block.
Why isn't my <div id="div1"> showing up and displaying on-screen after I adjust the width of the browser less than 300px in my code below:
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>This JSFiddle offers a small results window where you can adjust the width of the window.
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>html css media-queries display
html css media-queries display
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
asked Nov 22 '18 at 8:50
James McTyreJames McTyre
535
535
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
Because css is read from top to bottom. The rule that is set last, is the one that will be executed, so replace position of media query
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
add a comment |
Because you need to declare your display: none; first, CSS runs from top to bottom:
#div1 {
display: none;
}
@media screen and (max-width: 300px) {
#div1 {
display: inline-block;
}
}
Hope this helps!
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
add a comment |
Edit your code as shown below:
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
add a comment |
You need to reverse the order of your cascaded styles
NB display none is to be over-ridden with display so that it will display at all
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
add a comment |
@media queries do not change specificity. At all. They just either apply the code or ignore it, depending on the provided condition.
Therefore, your code translates into:
#div1 { display: inline-block;}
#div1 { display: none; }
below width: 300px
and into
#div1 { display: none; }
above it.
You need to place the @media last if the specificity of the selectors remains the same.
#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
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%2f53426999%2fshowing-and-hiding-divs-using-css-media-query-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
Because css is read from top to bottom. The rule that is set last, is the one that will be executed, so replace position of media query
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
add a comment |
Because css is read from top to bottom. The rule that is set last, is the one that will be executed, so replace position of media query
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
add a comment |
Because css is read from top to bottom. The rule that is set last, is the one that will be executed, so replace position of media query
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
Because css is read from top to bottom. The rule that is set last, is the one that will be executed, so replace position of media query
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}<!--My HTML-->
<div>
Some content 1
</div>
<div id="div1">
Some Content 2
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
answered Nov 22 '18 at 8:55
Hiren VaghasiyaHiren Vaghasiya
3,3581519
3,3581519
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
add a comment |
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
Thanks for the straightforward answer. I wasn't aware CSS was read in that way prior.
– James McTyre
Nov 23 '18 at 2:02
add a comment |
Because you need to declare your display: none; first, CSS runs from top to bottom:
#div1 {
display: none;
}
@media screen and (max-width: 300px) {
#div1 {
display: inline-block;
}
}
Hope this helps!
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
add a comment |
Because you need to declare your display: none; first, CSS runs from top to bottom:
#div1 {
display: none;
}
@media screen and (max-width: 300px) {
#div1 {
display: inline-block;
}
}
Hope this helps!
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
add a comment |
Because you need to declare your display: none; first, CSS runs from top to bottom:
#div1 {
display: none;
}
@media screen and (max-width: 300px) {
#div1 {
display: inline-block;
}
}
Hope this helps!
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
Because you need to declare your display: none; first, CSS runs from top to bottom:
#div1 {
display: none;
}
@media screen and (max-width: 300px) {
#div1 {
display: inline-block;
}
}
Hope this helps!
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
edited Nov 22 '18 at 9:04
Allan Jebaraj
450211
450211
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
answered Nov 22 '18 at 8:59
Ben SwindellsBen Swindells
1809
1809
add a comment |
add a comment |
Edit your code as shown below:
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
add a comment |
Edit your code as shown below:
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
add a comment |
Edit your code as shown below:
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
Edit your code as shown below:
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
answered Nov 22 '18 at 8:54
Ozturk Can GokkayaOzturk Can Gokkaya
2695
2695
add a comment |
add a comment |
You need to reverse the order of your cascaded styles
NB display none is to be over-ridden with display so that it will display at all
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
add a comment |
You need to reverse the order of your cascaded styles
NB display none is to be over-ridden with display so that it will display at all
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
add a comment |
You need to reverse the order of your cascaded styles
NB display none is to be over-ridden with display so that it will display at all
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
You need to reverse the order of your cascaded styles
NB display none is to be over-ridden with display so that it will display at all
#div1 { display: none; }
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
answered Nov 22 '18 at 8:54
Carol McKayCarol McKay
1,9011711
1,9011711
add a comment |
add a comment |
@media queries do not change specificity. At all. They just either apply the code or ignore it, depending on the provided condition.
Therefore, your code translates into:
#div1 { display: inline-block;}
#div1 { display: none; }
below width: 300px
and into
#div1 { display: none; }
above it.
You need to place the @media last if the specificity of the selectors remains the same.
#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
add a comment |
@media queries do not change specificity. At all. They just either apply the code or ignore it, depending on the provided condition.
Therefore, your code translates into:
#div1 { display: inline-block;}
#div1 { display: none; }
below width: 300px
and into
#div1 { display: none; }
above it.
You need to place the @media last if the specificity of the selectors remains the same.
#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
add a comment |
@media queries do not change specificity. At all. They just either apply the code or ignore it, depending on the provided condition.
Therefore, your code translates into:
#div1 { display: inline-block;}
#div1 { display: none; }
below width: 300px
and into
#div1 { display: none; }
above it.
You need to place the @media last if the specificity of the selectors remains the same.
#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
@media queries do not change specificity. At all. They just either apply the code or ignore it, depending on the provided condition.
Therefore, your code translates into:
#div1 { display: inline-block;}
#div1 { display: none; }
below width: 300px
and into
#div1 { display: none; }
above it.
You need to place the @media last if the specificity of the selectors remains the same.
#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>#div1 { display: none; }
@media (max-width: 300px){
#div1 { display: inline-block;}
}<div>
Some content 1
</div>
<div id="div1">
Some Content 2 - only visible up to max-width:300px
</div>
<div>
Some content 3
</div>answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
edited Nov 22 '18 at 9:04
answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
answered Nov 22 '18 at 8:56
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
35.5k74774
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%2f53426999%2fshowing-and-hiding-divs-using-css-media-query-not-working%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
