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.

asked Nov 22 '18 at 8:50

James McTyre

535

add a comment |

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.

asked Nov 22 '18 at 8:50

James McTyre

535

add a comment |

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.

asked Nov 22 '18 at 8:50

James McTyre

535

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

asked Nov 22 '18 at 8:50

James McTyre

535

asked Nov 22 '18 at 8:50

James McTyre

535

asked Nov 22 '18 at 8:50

James McTyre

535

asked Nov 22 '18 at 8:50

James McTyre

535

asked Nov 22 '18 at 8:50

James McTyre

535

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 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 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 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 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>

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei 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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

5 Answers
5

active

oldest

votes

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 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 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 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 Vaghasiya

3,3581519

answered Nov 22 '18 at 8:55

Hiren Vaghasiya

3,3581519

answered Nov 22 '18 at 8:55

Hiren Vaghasiya

3,3581519

answered Nov 22 '18 at 8:55

Hiren 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 |

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 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 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 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 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

answered Nov 22 '18 at 8:59

Ben Swindells

1809

answered Nov 22 '18 at 8:59

Ben Swindells

1809

answered Nov 22 '18 at 8:59

Ben 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 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 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 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 Gokkaya

2695

answered Nov 22 '18 at 8:54

Ozturk Can Gokkaya

2695

answered Nov 22 '18 at 8:54

Ozturk Can Gokkaya

2695

answered Nov 22 '18 at 8:54

Ozturk 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 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 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 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 McKay

1,9011711

answered Nov 22 '18 at 8:54

Carol McKay

1,9011711

answered Nov 22 '18 at 8:54

Carol McKay

1,9011711

answered Nov 22 '18 at 8:54

Carol 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>

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei 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>

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei 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>

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei 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>

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei Gheorghiu

35.5k74774

edited Nov 22 '18 at 9:04

answered Nov 22 '18 at 8:56

Andrei Gheorghiu

35.5k74774

answered Nov 22 '18 at 8:56

Andrei Gheorghiu

35.5k74774

answered Nov 22 '18 at 8:56

Andrei Gheorghiu

35.5k74774

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr