Docs

[Brian]

Hi,

I’m just a novice so any help would be really appreciated. I have a revolution slider with a video that I’ve placed on several pages. The setup of the slider on each of the pages is the same, the only thing that changes is the choice of video.

I’ve placed the following css code in the custom field of the x-theme (integrity) I’m using:

@media only screen and (max-width : 736px) {
.mobile-hide {
display: none;
}
}

So when I go to mobile the slider and video hide just fine on two of the pages but on the other two they don’t hide.

Any help is greatly appreciated!

Thanks,
brian

[Rahul]

Hey there,

Can you please share us the link to your website where you’re trying to achieve this result?

Thanks

[Brian]

Thanks for your quick reply!

There are two pages this happens on with mobile devices:

Homepage

Learn English Online & More

As a comparison, the following page works just fine on mobile:

Business English Courses & More

Thanks in advance,
BJ

[Christopher]

Hi there,

Please add this code :

@media (max-width:767px){
.x-slider-container.below.bg-video {
    display: none;
}

}

Hope it helps.

[Brian]

Hi, now the slider doesn’t appear on mobile for the homepage (which is perfect) but it does appear on all the other pages that have it.

Question: I’m putting the code you sent in the customizing part of the theme in the CUSTOM field for css. Is this correct?

cheers
BJ

[Christopher]

Hi there,

Please make sure that you place the code under Customize -> Custom -> CSS.
You can provide us with login credentials in private replay.

Hope it helps.

[Brian]

This reply has been marked as private.

[Brian]

This reply has been marked as private.

[Christopher]

Hi there,

Please edit your CSS and close curly bracket for following media query :

@media (min-width: 979px) {
	.x-navbar-fixed-top {
    position: fixed;
    z-index: 1030;
}

.x-brand img {
  margin-top: 10px;
margin-bottom: 5px;
}
.x-btn, .button, input[type="submit"] {
text-shadow: none;
}
.line-separator{  
border-bottom:3px solid #91c845;
}

Then if you add provided code in previous replay, it works. Please see the attachment.

Thanks.

[Brian]

This reply has been marked as private.

[Thai]

Please replace your custom CSS with this:

.popup-content {
	height: 205px;
	border-width: 1px;
	border-style: solid;
	border-color: #91c845;
}

.sticky-popup .popup-header {
	border-right-width: 0px;
}

@media only screen and (max-width : 736px) {
	.mobile-hide {
		display: none;
	};
}

.sticky-popup-left .popup-header {
	margin: 5% 0px 0px;
}

.map.footer {
	width: 50%;
	margin: auto;
}

/* TOP Footer Background and Text color Change */
.x-colophon.top {
	padding: 2% 0px 2%;
	background-color: #91c845;
}
/* Bottom Footer Background and Text color Change */
.x-colophon.bottom {
	font-size: 15px;
	background-color: #fff;
}
/* Social Icon SIZE */
.x-colophon.bottom .x-social-global a {
	font-size: 50px;
}

@media (min-width: 979px) {
	.x-navbar-fixed-top {
		position: fixed;
		z-index: 1030;
	};
}

.x-brand img {
	margin-top: 10px;
	margin-bottom: 5px;
}

.x-btn, 
.button, 
input[type="submit"] {
	text-shadow: none;
}

.line-separator {
	border-bottom: 3px solid #91c845;
}

Hope it helps 🙂

[Brian]

This reply has been marked as private.

[Thai]

Please add the following CSS at the end of your custom CSS:

@media(max-width: 767px){
    .home .x-slider-container.below {
        display: none !important;
    }
}

Let us know how it goes!

[Brian]

This reply has been marked as private.

[Jade]

Hi Brian,

It seems to be working fine on my end. I checked on my phone and the slider on the homepage does not show up anymore. Please try to clear your cache and check again.

[Author]

Posts