Static header image or slider for mobilde devices

[Mario1986]

Hello Support Team,

I hope you can help. My Website is https://einkaufchip.de/ and I am using the latest X-Theme and WP-Version.
On each product page and on the main page I am using the revolution slider. On Desktop PCs everthing is displayed very well but on mobile devices I have a view Problems with the Display of the slider.

My question is if there is a possibility to use a static image that is only displayed on mobiel devices?

I hope you understand me

Thank you very much.

[jade]

Hi there,

There is an option in Revolution Slider where you can set which device width the layers will show which is under the visibility option.

So what you can do is set the normal layers to be hidden on mobile devices then add an image layer which will be hidden on desktops.

Hope this helps.

[Mario1986]

Thank you very much for your help. The Thing is that I do not want to use the Revolution slider on mobile devices. Is there a possibility to display an Image only on mobile devices?

Best regards

Mario

[jade]

Hi Mario,

You can disable the entire slider on mobile from the Slider Setting then add the static image through CSS for the homepage since you have set the slider in the Rev Slider : Masthead settings.

@media (max-width: 767px) {
    .x-slider-container.below {
        min-height: 300px;
        background-image: url(THE_IMAGE_URL_HERE);
        background-size: cover;
    }
}

Please change the THE_IMAGE_URL_HERE with the full URL of the image.

As for the product pages, since you have added the sliders in sections, you could simply hide the sections that contain the sliders through the Hide During Breakpoints option the is in the customize option of the sections.

Then you can add a different section that will contain an image element then also set the section’s hide during breakpoint option so that it will only be displayed on mobile.

Hope this helps.