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
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 |
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?
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?
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
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
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?
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?
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
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
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!
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!
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
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
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 ...
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
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
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!
I will send you a link and login details on PM.
Thanks!
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.
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.
that works, thanks :)
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