We're merging with GenerateBlocks! Learn more here.

Support Forum

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Maintaining square images with Overlay Style 2 Reply To: Maintaining square images with Overlay Style 2

#16051
David Beckwith
Participant

Tricky one. Try this CSS:

/* remove any minimum sizes */
.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image,
.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img {
    min-height: unset;
}

/* Based on max 5 column grid */
/* Define maxium sizes */
@media (min-width: 1501px) {
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img,
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner {
        min-height: unset !important;
        height: calc(20vw - 20px);
        max-height: 298px;
        width: calc(20vw - 20px);
        max-width: 298px;
    }
}

/* Reduce to 4 columns */

@media (max-width: 1500px) and (min-width: 1200px) {
    .wpsp-col-20 {
        width: 25%;
    }
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img,
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner {
        min-height: unset !important;
        height: calc(25vw - 20px);
        width: calc(25vw - 20px);
    }
}

/* Reduce to 3 columns */

@media (max-width: 1199px) and (min-width: 900px) {
    .wpsp-col-20 {
        width: 33%;
    }

    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img,
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner {
        min-height: unset !important;
        height: calc(33vw - 20px);
        width: calc(33vw - 20px);
    }
}

/* Reduce to 2 columns */

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-col-20 {
        width: 50%;
    }

    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img,
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner {
        min-height: unset !important;
        height: calc(50vw - 20px);
        width: calc(50vw - 20px);
    }
}

Note: this will apply to all Overlay Style 2 card designs…… so you may want to use a Custom Class in place of: .wpsp-overlay.wpsp-ov-style-two