How to crop resize change the aspect ratio of Divi gallery module images Tutorial by Pee-Aye Creative

How To Change the Divi Gallery Image Aspect Ratio – Make Images Square or Any Size

Hey friends, I'm excited to share with you some very helpful CSS snippets to change the Divi image gallery aspect ratio. This will be fun!

NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. That one actuallyy make the gallery use the original uploaded image aspect ratio instead.

Change the Divi Gallery Image Aspect Ratio
5

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Donna
4 months ago

there is no logical reason why “padding-top” works for that…but it does I guess…very weird, but thank you! Somebody is a CSS master!

Paul
Paul
4 months ago

That’s a little bit of awesome right there!

Trying to do this with the Fullwidth Portfolio with the Square 1-1 Option. What do I need to add to the 1-1 CSS to fix?

Thanks for any help you can addd here!

Doug Spence
Doug Spence
3 months ago

Hi, Im getting “expected RBRACE” shown below. THANKS!

.pa-image-gallery-1-1 .et_pb_gallery_image {
EXPECTED RBRACE
padding-top: 100%;
display: block;

Juan
3 months ago

You fixed my issue with the different thumbnails sizes. Thanks!

Laurie
Laurie
17 days ago

Hi There,

When I add this into the Main Element box under Custom CSS of my Divi Gallery Module, I get EXPECTED colon between lines 2 & 3 and well as UNEXPECTED token “}” at the end.

Here is what I am pasting (and removing the . at begining):

/*image gallery item aspect ratio square 1:1*/

pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}

pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

Am I putting it in the wrong box? Which . do I remove? I’d really appreciate any feedback you can give. Thanks!

Jan
Jan
15 days ago

Bro, this Gallery module was killing me! But then I found your Tutorial.
THANK’S mate!!! Solved all my problems.

Benjamin
Benjamin
12 days ago

Hi, thanks for sharing this code. I am having the same issue as some of the others.

I paste the code and double checked it. this is what my main element in divi shows once I do. It throws in Expected RBRACE and Unexpected Token ‘ } ‘/

/*image gallery item aspect ratio square 1:1*/

.pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
“Expected RBRACE.”
display: block;
}

.pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Unexpected Token ‘ } ‘.

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart