Center Genesis Responsive Slider

[AVTsteve]

This theme, Streamline Pro did not originally have a widget area below the menu for a slider. I registered the widget area and added the Genesis responsive slider. I was able to modify the code in the slider plugin style sheet to get it to the correct width, but cannot figure out how to get the image to center. What am i doing wrong? thanks!

http://198.57.236.71/~lwmhcsc/

http://198.57.236.71/~lwmhcsc/

[jbergen]

Hi,

Since your images are 920px wide, you just need to set #genesis-responsive-slider to max-width: 920px;. Here's what the CSS will look like (style.css, line 4):

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Jamie

---

Jamie @ Ladebug Studios

[AVTsteve]

Jamie,

I put the code above in, and now it looks like this: click Any thoughts?

[jbergen]

Hi!
You modified the CSS rule correctly, but there is a curly bracket at the beginning of your style.css file that is causing it to be ignored.

Current style.css:

/* Genesis Slider
------------------------------------------------------------ */

}

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Remove the curly bracket so it looks like this, and the image will be centered:

/* Genesis Slider
------------------------------------------------------------ */

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Jamie

---

Jamie @ Ladebug Studios

[AVTsteve]

Thank you, that looks much better. If i want to keep the slider width the same as the area above and below it, (around 1140px), is there a way to have it that wide, and still center the 920px image within it?

Also - I've never made changes to a style.css sheet for a plugin before. When the plugin gets updated, will that overwrite these changes? Thanks again!

[jbergen]

I'm not sure how easy that would be to make the slider 1140px wide and get the images centered. You can make it a little wider by setting max-width of #genesis-responsive-slider to 960px. Maybe if you loaded wider images, you could get it to display wider.

Great question about making changes to style.css. Yes, if you update your plugin, the changes you make to its stylesheet will be lost. (Sorry if I implied earlier that that was a good idea - I certainly didn't mean to!) One option is to add your changes to the theme's style.css file and use !important to override the plugin styling. For example, you could add this code to your theme's style.css:

#genesis-responsive-slider {
	max-width: 960px !important;
}

However, if you ever change or update your theme, you'll lose anything you add to its style.css. So the safest option is to make your own custom CSS file (see this video for a tutorial).

I hope that helps,
Jamie

---

Jamie @ Ladebug Studios

[AVTsteve]

Thanks, much appreciated!

[Author]

Posts