Fix Gallery Items into Grid

[TheoryUnit]

Hi there,

I’m trying to get the gallery items on this page: http://digiwool.com/graphic-design-sherborne/
to fit tightly into a grid with three columns in each row, so basically they all appear to be the same size, until you click them.

Thanks for your help.
Cheers!
Matt

[mldarshana]

Hi There,

Thanks for writing in! That’s because the images that you have used are uneven. For example you can compare the original sizes of this images below.

http://digiwool.com/wp-content/uploads/2017/07/macangus-jewellery-business-cards.jpg
http://digiwool.com/wp-content/uploads/2017/07/Woodlands-Nursery-London-Logo-and-Web-Design-Sherborne.jpg
http://digiwool.com/wp-content/uploads/2017/07/Birthday-Weather-Illustration-1g.png

Thanks!

[TheoryUnit]

Hi there,

Yep they are, but you guys have given me code in the past that has fixed the gallery in even sized images but it’s not working on this site.

I think it was this (but might be wrong):

.gallery .gallery-item .gallery-icon{
    max-height: 250px;
    overflow: hidden;
}

Can you provide some code that will fix the gallery grid into evenly sized/cropped images, but keep the image dimensions intact once you click into the lightbox?

Thanks,
Matt

[paul.r]

Hi Matt,

That code should still work.

Please add it in Cornerstone Builder > CSS

.gallery .gallery-item .gallery-icon{
    max-height: 250px;
    overflow: hidden;
}

Change 250 to adjust.

Thanks

[TheoryUnit]

Thanks Paul.

So I’ve put the code back in, but I’m still getting a couple of rows where there’s only one image per row, and some of the other images are butted against each other rather than being spaced evenly.

Your help as ever much appreciated.
Cheers!
Matt
URL: http://digiwool.com/graphic-design-sherborne/

[Joao]

Hi There,

I cant replicate the issue on my end, please clean your browser cache and test it again.

If that does not help please provide a screenshot and let us know which browser and device you are using while experiencing the issue.

Thanks