Genesis Slider – Slide alignment between navigation arrows

[strategichelp]

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.

[AnitaC]

What is the URL to your website?

---

Need help with customization or troubleshooting? Reach out to me.

[strategichelp]

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

[AnitaC]

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
}

---

Need help with customization or troubleshooting? Reach out to me.

[strategichelp]

-- 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

[strategichelp]

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!

[AnitaC]

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

---

Need help with customization or troubleshooting? Reach out to me.

[designbytracy]

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/

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[Author]

Posts