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.
Hi, We want to show a section only to author and another only to non-authors. Can this be done?
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?
I am sure this is possible but it may require you to add some custom code to your functions.php in your child theme.
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
}