custom css for mobile

[pbi design]

Hello,

I was wondering if there is a way to specify not to display the background images I have used on the following three pages when the site is viewed on mobile devices (on smart phones specifically):

http://pbidesign.com/evolution/?page_id=12918
http://pbidesign.com/evolution/?page_id=9025
http://pbidesign.com/evolution/?page_id=1333

I would like to specify to use an alternate asset background – a color – for all three instead. Can that be done with custom CSS?

thanks,
Rossitza

[Kyle – SUPPORT]

It can be done with CSS, however you would need to first add an extra class

– Kyle

[pbi design]

OK. Can you give me an example of how to do that? I mean, I can add an extra class in the asset(s), but then what would the CSS look like – I don’t write code… sigh.

[Kyle – SUPPORT]

Have you added the extra class? If so I can tell you what the css will be

– Kyle

[pbi design]

Hi Kyle,

so I added the following extra class: blueheader

I have to admit I have no idea if this is an appropriate/correct way to name an extra class… so do let me know if I should change it.

Thanks for the help.

Rossitza

[Kyle – SUPPORT]

Hi

Add this to your custom css:

@media only screen and (max-width: 767px) { 
.spb_parallax_asset.blueheader {
  background-color: #3c43ab;
  background-image: none!important;
}
}

– Kyle

[pbi design]

Hi Kyle,

thanks for your help. It’s exactly what I needed.

Is it also possible to do the same kind of thing in the following context:
can I specify that on laptop screens a different slider loads on the home page?

Here’s why: I have a funky (read: messed up) slider with lots of text layers and when it resizes to fit on a laptop screen it needs to do so in such a way that everything appears on screen without having to scroll down. After lots of messing around with the Revolution slider I have set it up so it scales and looks sort of ok on large desktop screen and on laptop screens. However, neither is exactly what I want. So I thought I could set up two sliders, built to scale if you will, one for 1920x1080px and another for screens up to 1368x768px.

Can that be done with custom CSS? What would I need to do – create two separate home pages? And then what?

Thanks for your help,
Rossitza

[Kyle – SUPPORT]

You can add multiple revolution sliders to the page and then add responsive classes in their extra class fields to determine which slider is viewed on what screen size. The classes are: http://getbootstrap.com/css/#responsive-utilities

– Kyle

[pbi design]

This will take me sometime to figure out, but in the meantime, I have one more related issue that’s super pressing:

The slider now has a video layer, so some users with older browsers are unable to see it. Is there a way to use custom CSS or is there a setting where once the browser is detected, if it can’t display html 5 video, a different slider is loaded (a version without the video layer)?

Assuming I need to add both sliders to the same home page – how do I do that? There is just a single field for the Revolution slider alias…

thanks,
Rossitza

[Kyle – SUPPORT]

Hi

I’m afraid that is quite advanced and beyond the scope of our support, sorry

– Kyle