How to change the size / aspect ratios of the portfolio grid images.

The portfolio grid is one of the better looking Divi features. I love that everything stays in a neat line on any device. The only problem is that not everyone wants a grid of ever so slightly landscape images. What if you want square portfolio images? or maybe you’re an author looking to display book covers? The forced aspect ratio being applied to the images by JS deep in Divi’s core can make this difficult.

Sure, you could use a fixed height to override this but then you lose the magic of the fluid grid. The real solution would be a if you could somehow set the height as a percentage of the width. With this CSS hack, you can.

 

.et_portfolio_image {
 padding-top: 100%;
 }
 .et_portfolio_image img {
 position: absolute;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 object-fit: cover;
 }

Just change the padding-top until you get the desired aspect ratio. We hope you liked this tip 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post

30 Comments

    • John

      I should add, this also works with the Divi Gallery.

      .et_pb_gallery_image {
      padding-top: 100%;
      }
      .et_pb_gallery_image img {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      object-fit: cover;
      }

    • Stephen

      hey, yes 🙂 It will work on any image that has it’s own container which is really handy!

  1. Kenneth

    Hi Stephen

    What about a Masonry effect, where you keep the image uncropped and alle the images nicely stacked. Is that possible?

    Sincerely Kenneth

    Reply
  2. Jeremy

    Hi Stephen,

    Great solution! This also works if you only want to change the Divi image gallery Grid view aspect ratio. I wanted mine square so used:

    .et_pb_grid_item .et_pb_gallery_image {
    padding-top:100%;
    }

    .et_pb_grid_item img {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }

    I would note for anyone who gets confused about the comment at around 1:20 in the video, about other elements being inside the same container as the image, I think I am right in saying that this refers to elements that are not positioned absolute or that are purely containers or wrappers themselves such as anchors.

    I say this as in your example the overlay is still inside the target container which might confuse people, but it also is positioned absolutely so is not a problem.

    In the image gallery situation the anchor is also inside the target container, but is just a wrapper so also is not an issue.

    Thanks again for this great solution!

    Reply
  3. Tina

    I like this solution. Would I be able to use this to make the portfolio grid images square as well as larger overall? How would that be done?

    Many thanks. New to this all.

    Reply
  4. Tim

    Does this work with a full width portfolio, as well?

    Reply
    • Carly

      I’m trying to figure out that as well. I downloaded Stylebot and entered the code, but the image did change.

  5. Liat

    This is great, thank you! Is there any way to disable this on mobile? It looks great on my laptop but on mobile I just see squares with images being reduced to fit inside, even if that means that a quarter of the square is empty.

    Reply
  6. Linus

    Hey guys, i’ve got a question about the slider option in the gallery module. Is there a way to keep the module a fixed size? My portrait images extends the height of the gallery too much. Can the portrait image by resized/minimised to fit the height of the landscape images?

    Reply
  7. itmaco

    Thanks for the fix!

    Reply
  8. Henry Kreindler

    Thank you very much for this. Very useful feature to have.

    Reply
  9. Vicky

    I’m so close yet so far! I’ve downloaded stylebot and it looks different to what you have. I’ve got lots of css code – is there a way of backing it up incase I ruin it. Not sure what to change in here.

    Reply
  10. Vicky

    I’m so close yet so far! I’ve downloaded stylebot and it looks different to what you have. I’ve got lots of css code – is there a way of backing it up incase I ruin it. Not sure what to change in here.

    Reply
  11. Vicky

    I think I have sussed it now. Thank you so much. Most useful video I’ve seen for doing this!

    Reply
  12. Vicky

    I think I have sussed it now. Thank you so much. Most useful video I’ve seen for doing this!

    Reply
  13. Robert

    Working with Square images and love this feature. Is there a way to change which thumbnail is used? because of the object-fit:cover, the landscape thumbnail is being zoomed and as a result, pixelated.

    There is a square thumbnail in the uploads folder, but I don’t know how to tell Divi to use that instead.

    Reply
    • Robert

      This isn’t the ideal situation, but if you go into the /wp-content/uploads/…. and delete the 400×284 px version of the photo, it automatically uses the main image and fits it into the space.

      Again, not ideal, but it works.

    • Robert

      Sorry, I’m spamming this post now…

      That didn’t actually work, to delete the 400×284 px image. It worked for the 1st image, but not the next 3 in the grid.

    • Dan

      Would love to know the answer to this as well.

  14. Damian

    Im new to WordPress and dont know much about coding so this is my question where to i put the code you just used?

    Reply
  15. rhod evans

    I’ve been trying to sort this with advice from various websites with no success until now. However this one has worked – I have square thumbnails at last, for which many thanks! However there is an issue. I’m using the CSS with Divi Gallery (copied and pasted from John) and there is something odd going on. I have both landscape and portrait images that I want to display as square thumbnails. Most of the thumbnails are displaying fine, but some of the landscape images are stretched, and even more odd is that one or two of the images which are of square origin, when displaying as square thumbnails are being cropped (as can be seen when you click to enlarge them). To see what I mean, click on the Galleries/Sold page. Any idea what’s going on? Thanks

    Reply
    • Rhod Evans

      Any ideas?

  16. Emily Wright

    My square images are being cropped. Any ideas on a fix?

    Reply
  17. Calvin

    Thank you SOOOOO much. This saved my life for a client site who creates hundreds of art pieces that are in square format.

    Reply
  18. Radha

    Where do I put the code?

    Reply
    • Denise

      In the CSS section of the Divi Theme Options

  19. Alex Lp

    any idea how to change the default width and height o the fullwidth portfolio in carousel mode?

    Reply
  20. Natascha

    I’ve just tried it (Theme Options/Custom CSS field and style.css) and it’s not working. Any idea why?

    Reply
  21. graham smth

    Am i right thinking this is a universal change that would be applied to every image size?

    I have got a few different disciplines (animation and design formats) where i need to use SQ / 1920×1080 / 1080×1920 for showing video stills for various social formats, SQ for photography etc etc. there some way to point the code to link to a certain project page? or in fact can the code be added into the module CSS so the change is unique from module to module (non universal) as apposed to the Theme options CSS which i assume is universal over the whole site?

    thank you look forward to hearing. happy new year too:)

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.