Problems with Classic Slider and Revolution Slider

Support
#1

Hell support team,

I hope you can help me. I have two problem:

1.) On mobile devices I want to deactivate the Revolution Slider and instead I want to display a static image. To do this I disabled the revolution slider on mobile devices for this page https://einkaufchip.de/produkte/einkaufswagenchips and added this code, but it does not work.

@media (max-width: 767px) {
.x-slider-container.below {
min-height: 300px;
background-image: url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);
background-size: cover;
}
}

I hope you can help me.

Thank you very much.

Best regards

Mario

#2

Hello @Mario1986,

Thank for asking. :slight_smile:

Background image is showing up fine, but you need to make few changes. Please add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
    div.forcefullwidth_wrapper_tp_banner {
    display: none;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hello, thank you so much. I could solve the problem 2.)

But the static image on mobile phones still does not work. I added this code to x > Theme Options > css

@media only screen and (max-width: 600px) {
div.forcefullwidth_wrapper_tp_banner {
display: none;
}
}

and this code in cornerstone on the page where the satic image should appear https://einkaufchip.de/produkte/einkaufswagenchips

@media (max-width: 600px) {
.x-slider-container.below {
min-height: 300px;
background-image: url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);
background-size: cover;
}
}

I hope you can help me.

Thank you very much.

Mario

#4

Hi There,

There is no .x-slider-container.below selector on this page: https://einkaufchip.de/produkte/einkaufswagenchips, so please delete the previous CSS and try with this CSS instead:

@media only screen and (max-width: 600px) {
    .forcefullwidth_wrapper_tp_banner .rev_slider_wrapper {
        display: none !important;
    }
    .forcefullwidth_wrapper_tp_banner {
        min-height: 300px;
        background-image: url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);
        background-size: cover;
    }
}

Hope it helps :slight_smile:

#5

Hello,

thanks a lot I added this code to the page https://einkaufchip.de/produkte/einkaufswagenchips

@media only screen and (max-width: 600px) {
.forcefullwidth_wrapper_tp_banner .rev_slider_wrapper {
display: none !important;
}
.forcefullwidth_wrapper_tp_banner {
min-height: 300px;
background-image: url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);
background-size: cover;
}
}

and it still does not work. Do you know what the problem is?

Thanks a lot.

Best regards
Mario

#6

Hi There,

There is a syntax error in your custom CSS:

.x-colophon.top,.x-colophon.bottom{background-color:white;border-top:1px solid rgba(0,0,0,0.086);box-shadow:0 1px 0 0 rgba(255,255,255,0.8) inset;@media only screen and (max-width:600px){.forcefullwidth_wrapper_tp_banner .rev_slider_wrapper{display:none !important;}.forcefullwidth_wrapper_tp_banner{min-height:300px;background-image:url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);background-size:cover;}}

I’ve used this online tool to correct it: https://e10host.com/css-beautifier

Please replace the current CSS with this:

.x-promo {
	border: none;
	box-shadow: none;
}

.with-container {
	border: none;
	box-shadow: none;
}

.widget ul,.widget ol,.widget_nav_menu ul li a,.widget_meta ul li a,.widget_pages ul li a {
	border: medium none;
	box-shadow: none;
	font-size: 15px;
}

.widget_nav_menu ul li a::before,.widget_meta ul li a::before,.widget_pages ul li a::before {
	content: "";
}

.x-colophon.top,.x-colophon.bottom {
	background-color: white;
	.x-navbar .x-container.max.width{max-width: 1200px;
}

.x-colophon.top,.x-colophon.bottom {
	background-color: white;
	border-top: 1px solid rgba(0,0,0,0.086);
	box-shadow: 0 1px 0 0 rgba(255,255,255,0.8) inset;
}

@media only screen and (max-width: 600px){
	.forcefullwidth_wrapper_tp_banner .rev_slider_wrapper{
		display:none !important;
	}

	.forcefullwidth_wrapper_tp_banner {
		min-height: 300px;
		background-image: url(https://einkaufchip.de/wp-content/uploads/2018/10/Slider-Mobil-EKC.png);
		background-size: cover;
	}
}

Regards!

#7

Hello,

thank you so much for your help but it still does not work.

What else could be the problem? On the main page www.einkaufchip.de it works but i cannot remember me how I did it.

Best regards Mario

#8

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

#9

Hello,

thank you very much for your help. Here are the login credentials:

#10

Hi There,

There is a syntax error in your custom CSS, I’ve already correct it:

Everything is working fine now.

Please check your website again.

Regards!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.