Adjust top margin of revolution slider for mobile resolution

Support Forums for LiveMesh Themes & Plugins Forums Appdev Theme Support Adjust top margin of revolution slider for mobile resolution

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2838
    Thomasthomas
    Member

    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.

    #2865
    Livemeshlivemesh
    Keymaster

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

    #2880
    Thomasthomas
    Member
    This reply has been marked as private.
    #2909
    RaghavendraRaghavendra
    Moderator

    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; 
    }
    
    }
    
    #2920
    Thomasthomas
    Member

    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.

    #2922
    RaghavendraRaghavendra
    Moderator

    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.

    #2924
    Thomasthomas
    Member

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

    #2927
    Rochesterrochester
    Member

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

    -roch

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Adjust top margin of revolution slider for mobile resolution’ is closed to new replies.