Mobile display shows different image sizes

Hi @languageservicesco,

Thank you for writing in,

I suspect one of the plugins you’re using might be causing the problem. Sometimes the issue might be caused due to a plugin conflict so you can start by disabling all the plugins within your site and then check. You can then enable them one by one to locate the one causing the issue and let me know. You can refer to this link for more information regarding this: https://docs.themegrill.com/knowledgebase/detecting-a-faulty-plugin/

Let me know if this helps you or not and I will get back to you.

Regards,
ThemeGrill Support Team

Hi,
Thanks for the response. I deactivated all plugins but it didn’t appear to make any difference either to the preview in the theme customize page or on a mobile phone.

The problem is that your slider images are different sizes (Xpx x Ypx).

You need to put the images into an editor and make them the same size either by resizing the images and/or by resizing the canvas (apply padding). Then upload to WordPress and try again.

Thanks for the response. When I did that, the display on the PC differed, which is why I spent ages changing the sizes of the images so they weren’t displayed with different sizes on a PC monitor. The sizes you see are the ones that work on my PC display so that the images are the same size. Don’t ask me how or why that happens though!

Look at the preview of the free Spacious Theme at https://themegrilldemos.com/spacious-demos

The slider and content should display correctly on all size screens.

These are the pictures used in the slider.

https://themegrilldemos.com/spacious/wp-content/uploads/sites/94/2014/03/book.jpg

https://themegrilldemos.com/spacious/wp-content/uploads/sites/94/2014/03/chess.jpg

The sizes of both are width=”1400″ height=”500″ (pixels)

The browsers adjusts the display size of the pictures according to PC/Smartphone display.

Try downloading these two pictures and uploading them to your WordPress install for the slider. If the result is different to the demo then there is a problem with your install of Spacious Theme or another plugin is interfering with the pictures.

It cannot be debugged when the pictures are different sizes.

Thanks for this information. I am a little confused now, as it would suggest that all pictures in the slider have to be exactly the same size for it to operate properly. This is clearly unworkable in the long term as there will always be pictures that are different aspect ratios and cannot be cropped for various reasons. That would then only leave the possibility of distorting the picture by changing the dimensions separately.

This seems to be borne out by what I have now done. The site now has one of the Spacious images linked to in the last post, one that I have sized to the same dimensions and one that I have simply changed the height to 500 pixels while retaining the original aspect ratio to avoid distorting the image. Image 1 in the slider is 2000×500 and displays differently to the other two, which are both 1400×500.

Image editing is an area that I am not particularly good at, so I am happy to hear that I am wrong and that there is a way to make images the same sizes without the issues described, but otherwise that is a deal breaker for me.

Hello,
If you have the courage:
For a client who had the same problem with different sizes and ratio , I made some transformation of the height of “figure img” and put object-fit:cover and on some image with javascript I have put some “object-position” information to have the good part of the image shown… but no so simple if you don’t know javascript and css to put sometimes also mediaqueries

Here are some informations

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

object-position for testing
https://codepen.io/mattdecamp/pen/yLarwxX
Best regards
siup

• This reply was modified 3 years, 2 months ago by siup.

Many thanks for the information. I generally have more courage than common sense in these areas, so I will definitely give it a go! At the moment, though, I am a bit overwhelmed with work, so it won’t be yet.
The only bit I am concerned about is “to have the good part of the image shown”. This sounds equivalent to cropping the image in advance, and my third image shows that this is not always possible, as valuable and necessary information is lost.
Thanks again.

Hi @languageservicesco,

Thank you for writing back,

Basically coming upto here you might have understood how the slider images works in the Spacious theme. The theme does not automatically resize the images so you will need to insert the appropriate image sizes for displaying the full image on your site.

Let me know if you still have any confusion and I will get back to you.

With Regards,
ThemeGrill Support Team

Hi there,

Thanks for your response. There is no confusion. The slider requires that all images have the same aspect ratio for it to work properly. That isn’t something I can work with because reality isn’t like that. I will therefore have to look for a different solution, probably involving a slider plug-in that allows greater flexibility.

I appreciate your time though.

Best,
Kevin

Hi @languageservicesco,

Glad everything is fixed for now. Let me know if you still have any confusion and I will get back to you.

With Regards,
ThemeGrill Support Team