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
  • css how to determine mobile or desktop
  • bootstrap hide div on mobile
  • hide image in mobile
  • mygek baghle
  • how to code image that show on desktop and dont show on mobile using php
  • css to hide box-shodow for mobile
  • bootstrap show only on mobile
  • avada hide on mobile breakpoint


  1. Reply

  2. Reply

  3. By Outance


  4. By FromAway


  5. By saini


  6. By ronak


Leave a Reply

Your email address will not be published.