Center Image in Responsive Slider?

Community Forums Forums Design Tips and Tricks Center Image in Responsive Slider?

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  Pinky 1 year, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #28260

    Mark
    Participant
    Post count: 1

    I’m using the Legacy theme and have the Genesis Responsive Slider on my home page.

    All of the images on my pages have  proportions of about 640×480. I’d like to show the full image centered within the slider. Currently it sits flush left with nearly 300 pixels of nothing to the right except an arrow hanging out there.

    Is it possible to specify that the images be centered?

    Thanks.

    #28635

    asdweb
    Participant
    Post count: 105

    Post a link to your site so we can look at it.


    Amy Susan Design.com @AmySusanDesign

    #28960

    Mark
    Participant
    Post count: 1

    Thanks. I built the site on my computer and have spent far too much time trying to transfer it to the Yahoo host (it’s where the owner set things up),

    Here’s the site: detailsmakethedifference.com

    Any thoughts are appreciated.

     

    #28978

    asdweb
    Participant
    Post count: 105

    add this to style.css

    ul.slides img {
    margin: 0 165px;
    }

    div.slide-image {
    background-color: #f1f2f1;
    }

    You may need to adjust the margin to suit.
    The background-color replaced the white, if you’d want to do that.


    Amy Susan Design.com @AmySusanDesign

    #28985

    Pinky
    Participant
    Post count: 95

    Hey Mark

    If you add this to your style.css it will center the images for you.

    [css]
    .flexslider .slides {
    margin-left: 140px;
    }
    [/css]

    If you want to get rid of the white area, you can go to line 129 of your style.css and replace this:

    [css]
    .flexslider {
    background: #fff;
    position: relative;
    zoom: 1;
    }
    [/css]

    With this:

    [css]
    .flexslider {
    background: none;
    position: relative;
    zoom: 1;
    }
    [/css]

    Hope that helps


    cheers

    Pinky

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.