ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• October 14, 2014 at 2:32 pm #120058
  pbi design

  Member

  Post count: 82

  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

  October 14, 2014 at 2:51 pm #120079
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  October 16, 2014 at 6:00 pm #120884
  pbi design

  Member

  Post count: 82

  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.

  October 17, 2014 at 7:55 am #120946
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  October 17, 2014 at 7:33 pm #121193
  pbi design

  Member

  Post count: 82

  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

  October 20, 2014 at 8:09 am #121329
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  October 21, 2014 at 8:48 pm #122100
  pbi design

  Member

  Post count: 82

  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

  October 22, 2014 at 8:07 am #122216
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  October 22, 2014 at 7:06 pm #122446
  pbi design

  Member

  Post count: 82

  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

  October 23, 2014 at 7:30 am #122518
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

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

  – Kyle

• Back to forum

  Posted in: Dante