Tip of the week: How To Hide Content By Device

Published on by | 4 Comments

Greetings Everyone,

Have you ever wanted to hide a particular section or content but wasn't quite sure how to do it. You knew you needed to use media queries to accomplish the task but didn't know where to begin.

Well this weeks tip of the week is for you and hopefully will solve that problem.

Let's Begin

What I will be sharing with you today is a set of classes that will be linked to media queries at various screen sizes. (Of course you change the sizes if what I have doesn't suit you)

Here are the classes:

hide-on-mobile-only
hide-on-tablet-only
hide-on-mobile-and-tablet
hide-on-tablet-and-desktop
hide-on-desktop-only

I know the classes are a little long but I wanted to make them descriptive to make it easy to know what each was doing.

Here is are the media queries you would need to copy and paste into your LESS/CSS area:

@media only screen and (max-width: 600px) {
.hide-on-mobile-only {
display: none !important;
}
}
@media only screen and (min-width: 600px) and (max-width: 992px) {
.hide-on-tablet-only {
display: none !important;
}
}
@media only screen and (max-width: 992px) {
.hide-on-mobile-and-tablet {
display: none !important;
}
}

@media only screen and (min-width: 601px) {
.hide-on-tablet-and-desktop {
display: none !important;
}
}
@media only screen and (min-width: 993px) {
.hide-on-desktop-only {
display: none !important;
}
}

So what do I do now.

After you have copied the media queries into your LESS/CSS area all that remains is to add the class to your section or custom html.

Well that's it for this weeks tip of the week don't forget to give a like or share.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

 

4 Responses to "Tip of the week: How To Hide Content By Device"
  1. Great tip, we have used this extensively. We also want to show a section only to author and another only to non-authors. Can this be done?

  2. You can always check is it user role author and do something like
    $user = wp_get_current_user();
    if(in_array('author', $current_user->roles)) {
    //The user has the "author" role do stuff
    } else {
    do stuff when its not author
    }

Leave a Reply

Your email address will not be published. Required fields are marked *


Let's build something great together.

iHeart PageLines

  • 7 Free sections
  • Tutorials and Tips
  • Great Support
  • Custom Sections
Join For Free !!!

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match