- This topic has 16 replies, 2 voices, and was last updated 3 years, 7 months ago by
.
-
Posts
-
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?
Hi there,
That’s really strange – does the issue go away if you remove your custom CSS applied to that list?
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.
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…
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 🙂
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.
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?
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.
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 🙂
Our contact form is the best way: https://wpshowposts.com/contact
It looks like this issue is coming from setting image sizes.
For example, I removed the image size values from the latest news list, and the list looks the same on all browsers now.
Can you confirm?
Yes, sort of. I agree setting the image sizes is the issue. The top news section has similiarly proportioned featured images to start with, so that’s expected behaviour.
I’ve set the original, differently proportioned featured images for the Yurts and Bus pages in the lower section. This is where the issue is, trying to override differently proportioned featured images. The sizes per row change – the middle row of the lower section is taller than the top and bottom rows when the sizes are not set in WPSP, taking the height from the 2 deeper images in that row.
What I’m trying to understand is why, when the image sizes are set in WPSP, everything behaves as intended (sizes are applied for both sections) in Firefox, but not in Chrome/Safari, and whether there’s anything that can be done to get them to match the Firefox behaviour, regardless if original image proportions.
- You must be logged in to reply to this topic.