Blog Carousel Styling for Blog Grid Page

[Nic]

Nic

October 8, 2014 at 4:53 am

Howdy,

I’ve been trying to get a similar image styling on the 3 column blog grid page as there is on the blog carousel. Here is my current blog grid page and desired blog carousel image styling (just scroll down on the homepage).

The blog carousel has done a great job at styling the featured image (centering the image, making it responsive to various window sizes and not stretching out the image). I’ve attempted some custom CSS for the blog grid page, but it doesn’t seem to be doing the trick. My blog grid page still isn’t great at being responsive to different windows as it will often stretch the images in an unusual way, and it doesn’t center the image so the bottom are pretty much always cutoff.

Is there a way to replicate how the blog carousel treats and styles featured images on the blog grid page?

Thanks!

Nic

Custom CSS for Blog Grid Page Images:
/*CREATES A MIN SIZE FOR BLOG GRID BOXES AND REMOVES BORDER*/
#kad-blog-grid .blog_item {
min-height: 500px;
max-height: 500px;
overflow: hidden;
border: none;
}

/*CONTAINER FOR FEATURED IMAGES IN BLOG GRID*/
#kad-blog-grid .img-margin-center {
text-align: center;
vertical-align: middle;
display: block;
max-height: 250px;
min-height: 250px;
overflow: hidden;
}

/*ADJUSTS FEATURED IMAGES IN BLOG GRID*/
#kad-blog-grid img.iconhover {
vertical-align: middle;
min-height: 50%;
max-height: 100%;
min-width: 100%;
position: relative;
border: 0;
}