Make div disappear with CSS media queries on screen width.

[Anonymous]

How do i make a div/image disappear when the screen reaches a certain width using media queries?

[Paulie_D]

Disappear how?

Remove it from the DOM or just hide it?

[Kitty Giraudel]

I don’t think he means removing from the DOM. Anyway, that couldn’t be done. But you could hide it.

@media (max-width: 40em) {
.element {
display: none;
}
}

[Paulie_D]

>I don’t think he means removing from the DOM. Anyway, that couldn’t be done

With JS you could…couldn’t you?

[devil3682116]

@media (max-width: 40em) {
img {
visibility:hidden;
}
}
also works…you can simply give the width…here “max-width” means devices less than width of or equal to…

[Paulie_D]

display:none

is not the same as

visibility:none

http://codepen.io/Paulie-D/pen/39b45717797e5d4068d87de01c949386

[CrocoDillon]

> With JS you could…couldn’t you?

That would be too easy.

[Kitty Giraudel]

> With JS you could…couldn’t you?

Very easily, but that would require JS to do something you could (and have to) do with CSS only (Media Queries).

[devil3682116]

@Paulie_D : got it! thanks :(

[Author]

Posts