Controlling Featured Photo Size in Genesis Slider – Agency

[eluviis]

I'm using 800 x 800px images for featured images in an Agency child theme site through my other Genesis company account (ravx)...

I'm trying to set the Genesis Slider to work with these large images. But because of the large gaps of white space, and the fact that the images are square, the only way it looks good is if I max out the vertical size of the slider so the photos display at a full 800px.

While this look bold, big and modern, I think it might be too big.

Do any of you CSS wizzes have some code that can drop the display size of the slider photos down by percentage?

This is how it currently looks: http://ravx.com/xrd/ as of Feb 28 at noon.

[eluviis]

Ok, I got it to work. This might help others with the same problem, so I'm going to post it here.

I got it to work by adding this simple bit of CSS to the Agency style.css to overrride the Slider CSS settings for this rule.

.agency .flexslider .slides img {
max-height: 50%;
}

I pulled the code with Firebug, likely out of the stylesheet for the slider plugin. But it did the trick. All I changed was I added .agency  and changed the max-height from 100% to 50%. By the way, it works without adding .agency.

[eluviis]

OK, I take my previous post back. The bit of CSS I added works in Chrome and Safari... but it does not work on Firefox or Internet Explorer. I added !important; rule to it and it still doesn't work.

Anybody have a CSS hack for IE and Firefox to reduce the size of the slider photos?

[eluviis]

I'm making all CSS changes in Agency's styles.css but I'm having problems with some rules not working because they are overridden by the styles.css of the slider plugin. I'm frustrated and I'm about to go into the style.css of the responsive slider itself and change the rule there...

But it will get overwritten when the plugin is updated, right?

[Author]

Posts