Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Slider – Slide alignment between navigation arrows
- This topic has 7 replies, 3 voices, and was last updated 11 years ago by designbytracy.
-
AuthorPosts
-
January 21, 2013 at 6:18 pm #13608strategichelpMember
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: 1Not 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.January 21, 2013 at 7:05 pm #13618AnitaKeymasterWhat is the URL to your website?
Love coffee, chocolate and my Bella!
January 21, 2013 at 8:58 pm #13640strategichelpMemberhttp://strategichelp.net Thanks for taking a look.
January 21, 2013 at 9:28 pm #13647AnitaKeymasterI 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
}
Love coffee, chocolate and my Bella!
January 22, 2013 at 11:31 am #13739strategichelpMember-- 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
January 22, 2013 at 11:36 am #13740strategichelpMemberThanks 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!
January 22, 2013 at 12:08 pm #13746AnitaKeymasterYou're welcome. Glad you were able to get it resolved.
Love coffee, chocolate and my Bella!
April 29, 2013 at 4:39 pm #38472designbytracyParticipantI 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?
Tracy
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.