How to display images in a 1:1 ratio in Block Extended layout

If you’re using the Block Extended layout and want your blog images to appear in a perfect 1:1 ratio (square format), follow these steps:

Upload Images in 1:1 Ratio

Make sure the images you upload are already in a square format (e.g., 600x600px). This ensures the image appears in a 1:1 ratio when displayed on your site.

Add Custom CSS

To control how images appear on desktop (since mobile usually renders them as expected), add the following CSS code:

Where to Add:

Go to: Divi > Theme Options > Custom CSS

Code to Paste:

@media screen and (min-width: 981px) {
    .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended .post-media,
    .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended .post-media-container,
    .et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended .post-media,
    .et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended .post-media-container {
        height: auto !important;
    }
    .et_pb_section:not(.et_section_specialty) .et_pb_column_2_3 .et_pb_post_extra .post-media img,
    .et_pb_section:not(.et_section_specialty) .et_pb_column_3_4 .et_pb_post_extra .post-media img,
    .et_pb_section:not(.et_section_specialty) .et_pb_column_4_4 .et_pb_post_extra .post-media img {
        height: auto !important;
    }
}

This CSS will ensure that your uploaded 1:1 images maintain their square aspect ratio even on larger screen sizes.