Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Maintaining square images with Overlay Style 2

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #15834
    Andrew
    Participant

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

    #15856
    Tom
    Keymaster

    Hi there,

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

    #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.

    #16028
    Tom
    Keymaster

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

    #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.

    #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

    #16080
    Andrew
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.