Maintaining square images with Overlay Style 2

This topic has 6 replies, 3 voices, and was last updated 3 years, 4 months ago by Andrew.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

May 22, 2020 at 3:26 am #15834

Andrew

Participant

If my featured images are 1200px square, can I force the blocks to maintain a square?

May 22, 2020 at 4:32 pm #15856

Tom

Keymaster

Hi there,

Not too sure what you mean – can you show me an example/what you have so far?

May 26, 2020 at 11:40 pm #15997

Andrew

Participant

https://remotely.zone/homeshot/

The images are set to 325px width and height – But the blocks are not square. If I find the perfect width/height to make them look square for this 1615px wide container and 5-column List, they won’t look square on other screen sizes.

May 27, 2020 at 4:56 pm #16028

Tom

Keymaster

Hmm, not sure how to accomplish this one. I’ve pinged David to see if he has any ideas 🙂

May 28, 2020 at 6:31 am #16041

Andrew

Participant

Image css does my head in at the best of times – be great if a solution can be found here. Using the Lists as a kind of Portfolio is really helpful but photographers do like their images unmolested.

May 28, 2020 at 10:26 am #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

May 29, 2020 at 4:03 am #16080

Andrew

Participant

Wicked mate, cheers; I was looking at a whole bunch of media queries too but yours is pro.

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

[Resolved] Maintaining square images with Overlay Style 2