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