Hide certain blocks from Mobile devices and desktops

Permalink Browser Info Environment
Hey have been playing around for about 3 hours with trying to apply CSS to certain blocks so they only show up on certain devices, but no luck at all
I was mostly trying @media (min-width... & @media (max-width...

I want to show video background in a block for example, but I only want that block to be visible for desktops.
Then it would be nice to make another block that would be a background image and for that one I would make it only visible for mobile devices (as an alternative to the video one)

Is this possible in this theme, is it difficult and how can this be done

Type: Discussion
Status: In Progress
sme1972
View Replies:
jordif replied on at Permalink Reply
jordif
Hi,

Since the theme is based on Bootstrap 2.3, you have 6 classes for showing and hiding content by device: ".visible-phone", ".visible-tablet", ".visible-desktop", ".hidden-phone", ".hidden-tablet" and ".hidden-desktop". So if you add the ".hidden-phone" class to an image, a paragraph or a whole block, it will be hidden on phones.

Regards,

Jordi
localthyme replied on at Permalink Reply
localthyme
BRILLIANT! Just what I needed! THANK YOU!!!

A follow-up: Out of curiosity, is there a way of doing this in reverse? For example, a block that shows up on the phone, but not on the desktop version? Is there a class for that?
jordif replied on at Permalink Reply
jordif
Hi!

below is a list of the available classes:

visible-phone -> only visible on phone
visible-tablet -> only visible on tablet
visible-desktop -> only visible on desktop
hidden-phone -> hidden on phone (visible on tablet & desktop)
hidden-tablet -> hidden on tablet (visible on phone & desktop)
hidden-desktop -> hidden on desktop (visible on phone & tablet)


Regards,

Jordi
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi, I've tried, but it's not working for me...

This is what I've done:

Design & Custom Template > Clicked on the Cog Wheel > Typed 'hidden-phone' in the Custom Class dialog > Save

Did I do something wrong?
jordif replied on at Permalink Reply
jordif
Hi!

This is the list of available classes in Bootstrap 2 and will only work in the 5.6 version of the theme.

I guess you're using the new version of the theme for concrete 5.7, which is based on Bootstrap 3. In that case you need to use one of the following classes:

http://getbootstrap.com/css/#responsive-utilities-classes...

So you're doing it right, but you need to enter one of the new classes (for instance try entering "hidden-xs" to hide a block on phones)

Hope this helps,

Jordi
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi Jordy, thanks for your quick reply! Yes, I tried entering those new classes, but no such luck :(

I tried typing '.hidden-xs' and I also tried 'hidden-xs', but when I open we website on my phone, the slider is this there...

Any other ideas?

Thanks!
jordif replied on at Permalink Reply
jordif
Hi!

make sure you enter "hidden-xs" (without dot at the start and without quotes). Here is a quick demo so you can see:

http://longstoryshort.15robots.com/hide-mobile...

Jordi
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi Jordy, yes that's what I did, but it won't work... Strange because it works exactly the way I want it to on your demo ...
jordif replied on at Permalink Reply
jordif
Is your site live? Can you send me a link so I can have a look?

Also, make sure the changes are published (not only saved) and that your cache is off.

Lastly, what block are you trying to hide?

Jordi
ZillionProductions replied on at Permalink Reply
ZillionProductions
I appreciatie your help! Im trying to hide a slider, Cache is off and changes are published.

I will send you a link and login details on PM.

Thanks!
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi Jordi, just wanted to let you know that your last solution worked like a charm!
Thanks!

--- Solution ----

Anyway, you can always include the "hidden-xs" class manually by going to Design -> Customize, and pasting the following code into the "Custom CSS" field:

@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}

After including this code, you should be able to use the "hidden-xs" class with any block.
designeclectic replied on at Permalink Reply
designeclectic
that works, thanks :)

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.