Centric Pro home-widgets-1 padding-bottom?

[Ted]

I've modified a version of Centric Pro for my photography site and I've got a carousel slider in the home-widgets-1 area. Below the slider I'm seeing about a 30 or 40px black line. I've gone through everything I can see in the stylesheet and can't find anything that would be causing it. Also looked through the css of the slider plugin, but nothing there.

Obviously it's something, I'm just not finding it. Anyone know what might be causing this?

http://tavphotography.com

Thank you!

Ted

http://tavphotography.com

[Tom]

Hi Ted,

I see a 12 pixel band/variance below the slider image bottom that appears to be a result of the slider javascript. The images are 650px high, but they sit in a container 662 px high (663 in Firefox). At first look, I think you can tweak this with some CSS like this snippet, but then you'd have to repeat for each media query.,

.electriccarousel-viewer,
.electriccarousel-anchor {
	max-height: 650px !important;
}

A better approach would be to find out why the JS, set to 650px image gives a 662px container.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Ted]

Hey Tom,

Man, thank so much! I plugged the css in and it took care of it. I'm not completely a fan of the carousel slider I'm using there, but it sort of works until I can find a better one.

Thanks again!

Ted

[Tom]

You're welcome, Ted.

This fixes the media queries and uses the widths tested in the plugin JS:

@media only screen and (max-width: 1200px) {

	.electriccarousel-viewer,
	.electriccarousel-anchor {
		max-height: 500px !important;
	}
	
}

@media only screen and (max-width: 992px) {

	.electriccarousel-viewer,
	.electriccarousel-anchor {
		max-height: 400px !important;
	}
	
}

@media only screen and (max-width: 768px) {

	.electriccarousel-viewer,
	.electriccarousel-anchor {
		max-height: 300px !important;
	}
	
}

I was also curious about the black bar that appears at different widths above the slider, and found that you can make it disappear with this (see line 1661):

.home-widgets-1 .widget {
    margin-top: 156px;
    max-width: 100%;
}

@media only screen and (max-width: 808px) {

	.home-widgets-1 .widget {
	    margin-top: 135px;
	}	
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts