CODEWITHSUNDEEP
htmlcssipadmedia-queries
ThrottleDawg
ThrottleDawg

Reputation: 23

How to hide a <div> with media queries?

I'm trying to hide a certain div element only on my ipad and mobile versions of my site. I have it hidden but it's not really "gone" if that makes sense? it's position is till taken just invisible. Is there a way to completely remove it on mobile and ipad so that my text re-position itself on those platforms?

Thanks for the help!

Upvotes: 2

Views: 10929

Answers (2)

subhash
subhash

Reputation: 39

You must use .divclass{display:none;} display none will hide your DOM elements to browser.No evidence of block there.

Eventually visibility property .divclass{ visibility:invisible; } only hides DOM element to Users. Blank Space Background will be displayed instead of that block.

Upvotes: 0

Pravin W
Pravin W

Reputation: 2521

Below are list of standard media queries for devices

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

as per your requirement within these blocks you need to add CSS as follows

.foo{display:none;} /* foo is class of element you need to hide*/

either you can use display:none or visually hide as follows

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

useful question

CSS-Tricks article

Upvotes: 4

Related Questions