Center Slideshow

[Herb Trevathan]

Can the slideshow be centered here:

http://brookteam.com/playground1/

This is a client site (she purchased license Diana Arroyo)

I looked at the css and don’t see a clear way to apply something like

float: none;
margin: 0 auto;

any ideas?

Thank You

Topic

[Jason Bobich]

Hello Herb,

Flexslider adjusts all of the images into block-level elements. So (as you’d do with any block-level element with a specific width) you want to set the margin on right/left to auto.

.flexslider .slides img { margin: 0 auto; }

See screenshot: http://www.uploadblvd.com/uploads/image_5181923173491.png

Another approach would be to give the overall wrapper of the slider element a max-width (use “max-width” and not “width” so it remains responsive), and then apply right/left margin to the slider’s wrapper. This would center the entire slider, opposed to the images within.

But putting both of those things aside, the slider will probably display more ideally, though, if you were to use images that match the default crop size, which is 940×350.

[Herb Trevathan]

Hey Jason,

Thank You. I have never needed to do that with any slider. Client does design obviously and has a clear picture of what she wants it to end up like. So we’ll see where this goes. I will try the latter suggestion since that seems like the right fix and narrow the whole slider : )

I use chrome also (actually a chromebook 95% of my day)…

Question: Have you used google page speed insights? It’s online here: https://developers.google.com/speed/pagespeed/insights

There is a cool plugin for chrome which works in the inspector see here: http://tinypic.com/view.php?pic=51dojb&s=5

(just hide the button and use it in the inspector) Speed Tracer by Google is pretty awesome too – you can watch your scripts load and a tone more…

HAHA – I couldn’t figure out what was missing in your screenshot, I am so used to one more heading on my machine…

Amazing that your framework scores that high with so few recommendations considering all the integration it has : )

I test a lot of stuff for SEO clients and minify, enable caching…compression etc. Nice stuff!!

Thanks for your help.

-Herb

[Author]

Replies