Adjust top margin of revolution slider for mobile resolution

[thomas]

I was using iphone_slider in previous appdev version with this adjustment as per your advice:

@media only screen and (max-width: 767px) { 

.features-list-alternate .iphone-slider-container, .features-list-alternate .smartphone-slider { margin-top: 0; }

}

 

I now have to go for Revolution slider instead and would need to suggest the code for adjusting the revolution slider top margin to zero (0px) for mobile resolution – below 768px. In revolution slider settings my top margin is set to -300px to overlap the image above, which is correct, but would need to set it to 0px for iPhone resolution in custom css. Many thanks.

[livemesh]

Pls reply as a private message here with the site URL and I can take a look. Thanks.

[thomas]

This reply has been marked as private.

[Raghavendra]

The following Custom CSS inserted into Custom CSS tab in options panel will do –

.features-list-alternate .rev_slider_wrapper { margin-top: -350px !important; }

@media only screen and (max-width: 767px) { 

.features-list-alternate .rev_slider_wrapper {
	margin-top: 0 !important; 
}

}

[thomas]

It obviously does work, thanks very much.

I was trying to do it myself yesterday, playing with Developer Tools and inspecting classes and IDs of each div element involved there. I even came up with the .rev_slider_wrapper class property, but alone. I omitted the .features-list-alternate one. If I would look at the beggining of my own post, it would be apparent there.

May I ask for a short explanation why both classes need to be called on the line and how can I find this out myself in the Developer Tools in order to save your valuable time?

Thanks.

[Raghavendra]

I do not think the .features-list-alternate is necessary here. You probably missed the !important part of the CSS markup. Revolution slider inserts inline style for margin and hence unless you force the style with !important specified, the style gets ignored. You can view the inline style for revolution slider in developer tools as margin: 0 auto;. Hope this helps.

[thomas]

I see… Everything makes sense now. Thanks a lot.

[rochester]

I’m glad it’s resolved! Let us know if you need anything else!

-roch

[Author]

Posts