Is there a way to hide certain elements of a page on mobile devices?

[Manny Sousa]

Is there a way to make it so that there are certain elements of a page that don't appear on mobile devices? I'm not that well versed in CSS, but I was able to figure out some CSS in the space's custom stylesheet that seems to do the trick on the iOS devices I've tested. Unfortunately, this doesn't seem to work for Android, Windows phone, Blackberry, or any other device I may be missing. (I've posted my CSS below this question).

Is there an easier method? Maybe a universal device type that won't make me have to account for every type of device out there?

Thanks!

@media only screen
and (max-device-width: 480px) {
#action-menu-link {display:none !important;}
#browse-menu-link {display:none !important;}
#space-directory-link {display:none !important;}
.page-metadata-modification-info {display:none !important;}
}

@media only screen
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
#action-menu-link {display:none !important;}
#browse-menu-link {display:none !important;}
#space-directory-link {display:none !important;}
.page-metadata-modification-info {display:none !important;}
}

@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
#action-menu-link {display:none !important;}
#browse-menu-link {display:none !important;}
#space-directory-link {display:none !important;}
.page-metadata-modification-info {display:none !important;}
}
  
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
#action-menu-link {display:none !important;}
#browse-menu-link {display:none !important;}
#space-directory-link {display:none !important;}
.page-metadata-modification-info {display:none !important;}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#action-menu-link {display:none !important;}
#browse-menu-link {display:none !important;}
#space-directory-link {display:none !important;}
.page-metadata-modification-info {display:none !important;}

[AafrinA]

Hello Manny,

The css media queries that you have set covers different min-device width. Probably, the css rules would not work on those android, blackberry and windows devices as it might have higher resolution than the provided css media queries. To fix it, you can set a single css media query to cover a min-width only. When the device resolution reach a minimun defined width then it will add the rules to hide the elements.

For example, if the min-device width is set to 480px, any device that reach the a minimum of 480px width would have the css rules applied but nowadays there are smartphones with higher resolutions than that.

Another solution would be writing a jquery script (sample here) to detect the mobile devices and add the css classes on the fly when the portion of the jquery script is executed based on the mobile device.