[isearchlocalParticipant]

Hi guys,

hoping you can help.

I have searched the forum and internet for tips on this and feel i have implemented everything to make it work however, it still doesn’t seem to want to for me.

on the homepage here http://bit.ly/2030yTx

i have used a rev-slider below masthead with a full video as background.

#1 – it just shows up as a black screen on tablets and mobiles no video, ideally i would like to show it across all, if not then tablets but not mobile,

#2 – i would like to move up the circled arrow a little bit maybe 20 pixels so it appears higher up the video

#3 i would like to remove the circle from the option

—

any help would be appreciated here, thank you

[RupokMember]

Hi there,

Thanks for writing in!

#1. I can see the slider on mobile. You can check the settings again – http://prntscr.com/5ikbao

#2. You can add this under Custom > CSS in the Customizer.

.x-slider-scroll-bottom.bottom {
  bottom: 40px;
}

#3. Not sure which option you are referring. If you are referring the circle around the arrow then you can use this code instead of the above code :

.x-slider-scroll-bottom.bottom {
  border: medium none;
  bottom: 40px;
} 

Hope this helps.

Cheers!

[isearchlocalParticipant]

2 and 3 were perfect thank you.

I can still 100% not see the video background on any mobile device here.
so far checked:

iphone 4
iphone 5s
ipad pro
ipad 4
sony experia z5

i checked the setting as per your advice and its definitely on 0 any other ideas please?
thank you for your help on this.

#2 i also have one other question, the scroll bottom arrow, can i add any text to this, so it says “find out more” or something similar.

Thank you for all your help guys.

[ZeshanMember]

Hi there,

Sorry for the confusion!

Background videos don’t work on mobile devices. These are intended feature of mobiles. Please use a poster image instead that will appear in place of the video on mobiles.

#2: To add the text above the arrow, add following CSS under Custom > CSS in the Customizer:

.x-slider-scroll-bottom {
    width: 100px;
}

.x-slider-scroll-bottom:before {
    content: "Find out more";
    display: block;
    font-size: 14px;
    line-height: normal;
}

Thank you!

[isearchlocalParticipant]

i understand, thank you!

[ChristianModerator]

You’re welcome.

[Author]

Posts