On mobile, the recipe card thumbnail image looks distorted. You can use this recipe card for reference: https://www.floraandvino.com/chocolate-cherry-smoothie-bowl-banana-free/. Support is enabled on our site for you to review issue as necessary.
Please note that the same recipe card thumbnail image looks fine on desktop.
EXAMPLE OF ISSUE
We created this new recipe post, uploaded new images into WordPress: https://www.floraandvino.com/chocolate-cherry-smoothie-bowl-banana-free/
When viewing this recipe post on desktop/mac/chrome browser:
- the recipe image thumbnail is looks good
- When inspecting the image, it is showing 150px x 150px with intrinsic: 320 x 321 px; which is SQUARE (essentially)
But then when viewing this same recipe on mobile (iPhone 7 plus for this test scenario):
- the recipe image thumbnail is now distorted (the bowl and spoon look like they are at an angle instead of the image being taken straight down over the bowl)
- When inspecting the image, it is showing 150px x 150px with intrinsic: 450 x 675 pxs; which is VERTICAL
We use the WP Tasty recipe plugin and their support team suggested we 1) regenerate thumbnails to see if that fixed the issue or 2) deactivate the smush plugin and then create a new recipe, uploading new images to see if that fixed the issue.
Before doing those tests, we wanted to see if you could easily identify why the mobile recipe card thumbnail looks distorted? Could it b relates to the smush pro plugin or the CDN settings we are using?
Or potentially an incompatibility with the Lazyloading functionality turned ‘on’ via the WP rocket plugin or the mobile cacheing option.
Any info would be greatly appreciated!