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.

FacebookTwitterGoogle+