[Support request] Card image sizes

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Card image sizes

This topic contains 8 replies, has 2 voices, and was last updated by  Tom 1 week, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #12260

    jaiji
    Participant

    Hi, I’m having trouble with the image sizes using the Overlay- Style 1.

    https://www.knockengorroch.org.uk

    I’ve set the image sizes in WPSP to 740×471 (to be the right size in a single column mobile view, which is the largest they are displayed). It looks as expected in Firefox but in Chrome and Safari, and on mobile, the card images are much taller than the specified image height. If I remove the image heights then the card heights differ according to the overlay text (for the lower grid on that page).

    I have made some CSS changes to add the coloured stripe background on one side of each card (amongst other things, mainly heading and text sizes) but I can’t see how that would affect the image height.

    I’ve trawled through a lot of posts here about this and tried various approaches but in each case something ends up not working correctly. Any ideas?

    #12297

    Tom
    Keymaster

    Hi there,

    That’s really strange – does the issue go away if you remove your custom CSS applied to that list?

    #12302

    jaiji
    Participant

    No, sadly it doesn’t. I’ve stripped out all CSS related to WPSP on the dev site here: https://jaijiel.net/testsites/knock2020/ and the issue remains when comparing between Firefox and Chrome/Safari. The dev site is a little different to the live site (where I re-made the home page without Elementor) in terms of WPSP settings – image overlay colour, gutter size etc. – but it’s effectively the same layout.

    Also I’m using CSS to control the column count on the live site, with each grid set to 2 columns then changed via CSS at various breakpoints. Without the CSS on the dev site I’ve changed the column count from 2 to 3 to better replicate the live site layout.

    On both sites the image size is set to 740x471px for consistency. Some of the featured images used in the lower grid (under the video) are wide and shallow – they’re used in the shallow hero background images on the respective pages and I want to try and keep the featured image size as small as possible – and a few are deeper as they’re not used in the page heroes, so if I remove the image sizes from WPSP the lower grid becomes a mix of shallow and deeper images which is not ideal.

    I’ve just found that changing this helps:

    .wpsp-overlay .wp-show-posts-image, .wpsp-overlay .wp-show-posts-image img {
    height: calc(100% + 1em);
    }

    If the height is changed to auto then it works as intended in Chrome too. However, Safari is then clipping the meta at the bottom of the News (top) grid items… At a push I could live with just changing the image height to auto for the lower grid and make do with the News being a little strange in some browsers but it would be good to get to the root of this.

    #12303

    jaiji
    Participant

    I just realised that setting the image height to auto for the bottom grid (on the live site) has a weird effect on the middle row, giving those 3 items seemingly extra bottom padding which allows the background stripes to show up (not wanted). Strange it only affects the middle row…

    #12361

    Tom
    Keymaster

    Hmm, there must be something specific to that site causing this, but I’m not seeing it.

    For example, if I reduce the content length in our demo, the height of the card is reduced as expected: https://demos.wpshowposts.com/cards/

    Do you have an empty test site you can test this on? I just want to confirm it’s something specific to your sites above.

    Let me know 🙂

    #12389

    jaiji
    Participant

    Hi Tom

    Sorry for the delay – I haven’t had time to set up a fresh install until today. I’ve set it up with the same images, titles and excerpts as the live site and only GP (+ GP Child Site), GP Premium, WPSP and WPSP Pro (and also Classic Editor) installed. As expected/desired in Firefox with the same image size issues occurring in Chrome and Safari:

    https://jaijiel.net/testsites/wpsp/

    I can provide a login if you need one.

    On the original Jaijiel test site (/testsites/knock2020/) I have also tried stripping out all CSS, and disabling all plugins apart from GP Premium and WPSP/Pro. Same problem with Chrome and Safari.

    #12473

    Tom
    Keymaster

    I wonder if it’s specific to one of your images/titles/excerpts.

    What if you add different ones to the problem list? Or what if you unpublish all posts but one?

    #12595

    jaiji
    Participant

    Hi Tom, sorry, I’ve been off for the festivities and now have other live jobs to attend to, I haven’t had time to look further into this until just now. I’ve tried unpublishing all posts/pages but one – same. Changed all the manual excerpts to the same text – same. Changed all featured images to the same image (twice, one with a wide/shallow image and once with a 4:3 image) – same. I’ve also now made all the featured images the same size (the wide/shallow option) and tried various options with the image size in WPSP. If I remove the sizes they display more or less the same across browsers, but they are, unsurprisingly, very wide and shallow due to the image proportions. If I add only width it’s the same as without specifying a size; if I add only height it has no perceivable effect; if I make the image square it displays as it should in Firefox but is waaay taller than wide in Chrome. Stumped.

    I’d still like to understand why the display is different between browsers. I can’t see how the title/text/image choice would affect the sizing in Chrome/Safari but not in Chrome. It would point to a CSS thing, no? Or the way the images are sized in WPSP? I’m pretty sure you could replicate this using any title/excerpt/image as all the above is in a fresh WP/GP/GP Premium/WPSP install with no additional CSS. If a login to the test site would help – to check the WPSP settings and general setup? – I’m happy to set one up.

    #12643

    Tom
    Keymaster

    A test site would definitely be helpful if possible. It sounds like it’s related to the image sizes. Can I see the image proportions when you don’t specify any sizes?

    Let me know 🙂

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

You must be logged in to reply to this topic.