Background Slider not visible on mobile devices…

[webfrogs]

Hi again,

Please take a look at my site here…

If viewed on a mobile device, the slider is missing. These are my settings in the Revolution Slider –

Slider Settings
Slider Layout – Auto Responsive
Grid Width – 1600px
Grid Height – 730px

Mobile Visibility –
Hide Slider Under Width – 0px
Hide Defined Layers Under Width – 0px
Hide All Layers Under Width – 0px

Once I resize my screen to a mobile width, the background disappears and a color takes over. I’ve removed all cookies/cache, etc and even cleared my DNS.

I’ve checked on several mobile devices (iPhone, Android, iPad, and several smaller tablets).

Any ideas on this?

[SQadmin]

Hi, We made it hidden by default. You can disable this by adding this css to sweetdate-child/style.css or in WP admin – Sweetdate – Styling options – Quick css:

@media only screen and (max-width: 767px) { .rev_slider_wrapper { display: block; } }
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[webfrogs]

I added the style you suggested and this is what I ended up with… You’ll notice there’s no background on the initial screen. When you scroll down a bit, you’ll notice the background is there, but only part of it. The background isn’t showing up for any mobile device where it should be.

Can you please help fix this?

Thanks,

webfrogs

[SQadmin]

Hi, after a small research for this issue I found a posible solution, anyway, is not intented to use behind the form but in your case is ok because you use it as simple background slideshow. So you need to add the following lines in WP admin – Sweetdate – Styling options – Quick css box:

COPY CODE

@media only screen and (max-width: 767px) {
.revslider-head.absolute-head #header{ position: absolute;}
.revslider-head.absolute-head .form-wrapper { margin-top: 222px; }
.revslider-head .just-after-header { position: absolute; }
.rev_slider_wrapper { display: block; }
.page-template-page-templatesfront-page-php .rev_slider_wrapper { min-height: 890px; }
}

Regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[webfrogs]

Very good. Thank you!

[webfrogs]

I’m sorry… I think I had it wrong. The background image should stay in the same place, but I want it to be the width of the screen… Even with your fix above, it still looks like the image is full size, and it’s only capturing the top-center.

I debugged in Chrome and this is the HTML I’m trying to accomplish for the background image… I just don’t know where to apply it.

(I had to create this document because the forum won’t paste my entire snippet into this box)
HTML Here…

Here’s an image of how it should look on the mobile screen…

Mobile Screen View

Or is this better done by creating a kleo section and inserting a shortcode?

Thoughts?

[webfrogs]

Ok… third and final post…. I finally got it looking the way I want it. I used this code here…

COPY CODE

@media only screen and (max-width: 767px) {
.page-template-page-templatesfront-page-php .rev_slider_wrapper { min-height: 0px; } }

Here is an image of what my result was…

[SQadmin]

Great. I am glad you worked it out

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[catwin]

Hello,

I tried the above codes but my pictures are not displaying properly on my mobile device.

Slider Layout: Auto Responsive
Unlimited Height: Off
Force Full Width: Off
Grid Settings:
Grid Width: 960 Grid Height: 500

Hide Slider Under Width i 0 px
Hide Defined Layers Under Width i 0 px
Hide All Layers Under Width i 0 px

Hide Thumbs Under Width i 0 px

I will send the link to my site. Am I missing something?

Thank you and have a nice day!
Catherine

[catwin]

This reply has been set as private.

[catwin]

Saw that this was resolved so moved my question over to a new topic. My apologies!

[Author]

Posts