I did a Divi project recently where I wanted to place a clean tight fitting gallery of 10 images in a 1/3 block on the left and some accordion information in the 2/3 to the right.
If you choose the native Divi Gallery module, however, for the 1/3 section then the images just stack on top of each, responsively. Not at all what I wanted.
Fortunately, the ET community is pretty large and I found some onboarding help about how to break up the grid a bit online. This site (http://www.divithemeexamples.com/create-an-5678-column-rows-in-divi/) was a particular useful read and I eventually came up with the code below.
Here is a video showing how I used it:
And the code:
.et_pb_gutters2 .et_pb_column_1_3 .et_pb_grid_item {
margin-bottom: 0;
}
.et_pb_column_1_3 .et_pb_grid_item {
width: 50% !important;
padding: 2px 2px;
}
@media all and (min-width: 981px) {
.et_pb_gutters3 .et_pb_column_1_3 .et_pb_grid_item {
margin-bottom: 1px;
}
Build Beautiful.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Do you have an updated code for Divi 3.0?
Hi, Jay. Is it not working? I don’t think the classes have changed so the code should still be valid.
It’s not working for me. This site is not finished and is not in production yet, but I’m trying to get the gallery functioning in a 1/3 block on the home page. You can see it here: http://c4hpower.com/. I would like to have the gallery show 3 wide by 4 tall (12 pics). I have your code pasted in my child theme. Wondering if I am doing something wrong. Thank you.
Try this:
.et_pb_column_1_3 .et_pb_grid_item {
margin-bottom: 0;
width: 50% !important;
padding: 2px 2px;
}
I don’t see the .et_pb_gutters2 class in your site so perhaps that has changed.
Adding the above code (in dev tools, google chrome) worked for your site.
lmk.
It didn’t work to start so I recreated and uploaded a new fresh child theme from Elegant Marketplace and added your new code and that worked. I changed to 33% to get 3 columns and it’s good to go. Thank you!