CSS: How to Easily Hide Content On Only Mobile or Only Desktop

Desktop, Mobile Tablet / SmartphoneOne of the great things about Twitter’s Bootstrap 2 and Bootstrap 3 are the responsive utility classes. It makes hiding / showing content on only specific resolution sizes or devices easy. Other than the grid system, it’s one of the key features utilized in the framework.

What if you wanted to bring that over to your own website without having to use the whole Bootstrap framework?

No worries. Use the following custom classes that I’ve put together! Note that with media queries (which these classes utilize), you’ll lose some browser support with older versions of Internet Explorer…So fix that with Respond.js!

In your stylesheet, add the following:

//medium+ screen sizes
@media (min-width:992px) {
	.desktop-only {
		display:block !important;
	}
}

//small screen sizes
@media (max-width: 991px) {
	.mobile-only {
		display:block !important;
	}

	.desktop-only {
		display:none !important;
	}
}

This gives you two classes — mobile-only and desktop-only.

As the names imply, if you assign something with the “mobile-only” class, then it will only display when the screen size is tiny (991px or below) [smartphones, some tablets], whereas “desktop-only” will show only on sizes 992px or higher.

These values are easily changed and the whole concept can be modified without issue. You could even add an “xl-desktop-only” class. To get you started…

//large resolutions only
@media (min-width: 1200px) {
...
}

Media queries are great for responsive design. Just make sure to not over do it and add way too many breakpoints. You’ll give yourself a headache if you try to account for everything.

Incoming search terms:

  • bootstrap hide on mobile
  • CSS:HowtoEasilyHideContentOnOnlyMobileorOnlyDesktop|AGeekandHisBlog
  • bootstrap hide div on mobile
  • css how to determine mobile or desktop
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1824 IN1zBWiJe6LzTNC06_ONcIUF9opzrAY9AAjKopIrtdV-RUQeT_gbC0HUJRQVYKIK 35b09754ca414b7de312bafc7aa1f88daa71083c&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1838 JOyoUdbsrH_slUZlNJ3Rp8EQuWzS0Wnr4on6bid2YdS2O65yTxms9EC3rZL0iB_2 f44b41975191775bd0faea240cebf7a3d732ebe0&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • html mobile vs desktop
  • html how not show pictures in mobile version
  • table[class=body] hide-for-desktop {
  • how to hide logo bootstrap css in mobile browser

Comments

  1. Reply

  2. Reply

  3. By Outance

    Reply

  4. By FromAway

    Reply

  5. By saini

    Reply

  6. By ronak

    Reply

Leave a Reply

Your email address will not be published.