WP Orbit Slider
Make it not responsive...? (2 posts)

  1. lullie
    Posted 3 years ago #

    Just wanted to say that I love the slider! It's one of the best slider plugin.

    I'm trying to make the slider not responsive, because my website will have a special version for mobile, and a standard one, which is only for web -- the one I'm working on right now.

    I need my slider image to be exactly 1600px wide and centered on screen, so, if the user has a lower screen resolution (such as 1024x768), he/she would see only the middle of the slider (just like Rovio's slider, at http://www.rovio.com). Does anybody know how I could achieve this via CSS?

    I've tried to edit "custom.css", but all I could do was make the slider's width and height fixed. Good! But the images didn't get centered :/
    Any help is welcome!


  2. lullie
    Posted 3 years ago #

    oh, I partially did it. :'D (sorry for being so noob!)
    The bullets/nav/prev links are centering in all screen resolutions. Now I wonder what I should do to make the slider's images center in lower screen resolutions too (I mean, < 1600px). For me (my resolution is 1920x1080), it's centered.

    The key points I found until now on custom.css:

    #orbit-inside { width:1600px !important; margin:0 auto; }

    /* this is the main wrapper. I saw it through firebug add-on and declared a width to it */
    div.custom-slider { width:100%; margin:0 auto; }

    /* IMPORTANT! Keep the div.orbit-wrapper width = 100%, or the bullets/nav/prev links won't center in lower screen resolutions. */
    div.orbit-wrapper { width:100% !important; height: 1px; position: relative; }


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Orbit Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic