Genesis Slider – Slide alignment between navigation arrows

Community Forums Forums Design Tips and Tricks Genesis Slider – Slide alignment between navigation arrows

This topic is: not resolved

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #13608

    strategichelp
    Participant
    Post count: 8

    Genesis Slider in Enterprise theme

    I am trying to position the featured image centered between the side navigation arrows and failing miserably ;-\.  style file for the slider has section that looks like this but unsuccessful making changes that show on the page – although I am editing it and putting it to the correct place on the server.  Probably wrong section of the CSS…

    #slides {
    float: left;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 1

    Not positive this is the right section, haven’t been able to effect a change in anything other than the left navigation arrow.
    Seems simple enough, I want the featured image used in the slider to be equal distance from the right and left navigation arrows.  Thanks for any assistance.

    #13618

    AC
    Blocked
    Post count: 7712

    What is the URL to your website?

    #13640

    strategichelp
    Participant
    Post count: 8

    http://strategichelp.net Thanks for taking a look.

    #13647

    AC
    Blocked
    Post count: 7712

    I cannot find how to center an image smaller than the slider size, but you could change the width of the left and right widget areas where they are evenly proportionate. See how this looks for you.

    Look for this:

    #genesis-slider, #slides, .genesis-slider-wrap {
    height: 195px;
    width: 550px;  <— change to 450
    }

    Look for this:

    .home-top-right {
    float: right;
    height: 235px;
    margin: 0;
    padding: 0;
    width: 600px; <— change to 500
    }

    Look for this:

    .home-top-left {
    background: url(“images/home-top-left.png”) repeat-y scroll left center #1EA7E8;
    color: #FFFFFF;
    float: left;
    height: 235px;
    margin: 0;
    padding: 0;
    width: 330px; <— change to 430
    }

    #13739

    strategichelp
    Participant
    Post count: 8

    – Read from the bottom to the top – solution is at the top here — Thanks support!!

    StudioPress support replied to my follow up with the exact “gem” that I was looking for -  When I dropped this into my style for the child them the slider image, without any extra graphic padding, neatly center aligned itself in my slider!

    Add the following to your child themes style.css.

    .slide-image {
    text-align: center;
    }

    I replied to StudioPress support’s suggestion below:

    Thanks, I can see your suggestion as a work-around, but is there any way to simply center the image within the overall 550px width of the slider “frame”-  instead of having to handle it within every graphic image used?  Thanks again for quick response, as I had not thought of the idea you brought up.

    ————

    StudioPress support replied emailed me from a case I opened:

    You have the slider width set to 550px wide and your images are narrower than this.

    My recommendation would be to take your images and center them in a new image that is 550px wide.

    This will fill up the slider width and give you the equal distance you are looking for.

    Thanks,

    StudioPress support

    #13740

    strategichelp
    Participant
    Post count: 8

    Thanks For your suggestion anitac, I think yours and support’s first suggestion would work, but for a number of reasons I like handling it in the css code and having more room to work with within the slider “frame” area. Thanks again! I’m always impressed with Genesis support and the community here!

    #13746

    AC
    Blocked
    Post count: 7712

    You’re welcome. Glad you were able to get it resolved.

    #38472

    designbytracy
    Participant
    Post count: 51

    I tried adding this CSS as I’m having the exact same problem trying to center images within my Genesis Responsive Slider and it’s not working for me. Does anyone have any ideas?

    http://shelleymccoyart.com/


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

You must be logged in to reply to this topic.