-
AuthorPosts
-
February 22, 2022 at 6:51 pm #1341821
I have two different webpages (see links below) where the images are the same dimensions, but are displayed differently in mobile.
I’m using a Fullwidth Easy Slider at the top of the page on both images. I have compared both setting and they appear to be identical. I’m not using CSS in either element.
The image sizes look identical from Desktop/Laptops.
What am I missing – please?
Best Regards,
JulioFebruary 23, 2022 at 4:20 am #1341905Hey Julio,
Thank you for the inquiry.
The image in the about page is actually taller by 150px compare to the other image. The size of the image in the about page is 1920 x 850px while the smaller one is 1920 x 700px.
Best regards,
IsmaelFebruary 23, 2022 at 5:12 am #1341925Thanks for your response, Ismael.
Yes, I made the image on the About page larger (1920 x 850px) after I made this post. However, even with making it larger or keeping it at 1920 x 700, the About image is still displaying at a smaller size than the Contact Us page on a mobile phone.
Would love to understand why. Thank you
Best Regards,
JulioFebruary 23, 2022 at 5:37 am #1341937Hi,
the About image is still displaying at a smaller size
The image in the about page is actually larger when we checked. Please make sure to purge the cache or switch to incognito mode to make sure that you are not viewing a cached version of the page. You can check the screenshot of the About page in the private field.
Best regards,
IsmaelFebruary 23, 2022 at 6:18 am #1341939Hi Ismael,
Yes the image for About us is larger on a desktop, but not from a mobile phone – see mobile screenshot below. I believe you will notice the Contact Us image is larger than About on mobile.
Thank you for providing a screenshot, but it doesn’t display.
Can you help me understand why the About image is smaller on a mobile footprint? Thank you.
Best Regards,
JulioFebruary 23, 2022 at 8:01 am #1341949Hi,
I see. Sorry about that. I missed the “on mobile” part in the topic title. We are not yet sure why it resizes like that but it might be due to the srcset attribute which allows the browser to serve a different thumbnail or a different version of the original image based on the current screen size. The served thumbnail might have a different aspect ratio compare to the original image. You can prevent this behavior by temporarily disabling the Responsive Images option in the Enfold > Performance > Responsive Images And Lazy Loading option.
Best regards,
IsmaelFebruary 23, 2022 at 4:29 pm #1342018Thanks for the suggestion, Ismael. I have implemented the suggested change, removed cache and tested incognito, but no change.
Any other suggestions? Thank you.
Best Regards,
JulioFebruary 24, 2022 at 9:07 am #1342116Hi,
Thank you for the info.
The srcset attribute is still applied to the image element when we checked the site. Are you sure that the option has been disabled? Are you using another image plugin?
Best regards,
IsmaelFebruary 24, 2022 at 4:06 pm #1342153After implementing the suggested change and testing after clearing cache & tested via incognito with no change. I reenabled lazy loading. That’s why you may be seeing the srcset.
I have been using the Smush plug-in to compress images for awhile now.
Not sure why this is happening. Feel free to close this topic. Thank you
Best Regards,
Julio- This reply was modified 2 years, 9 months ago by Jules.
February 25, 2022 at 3:40 am #1342208Hi,
with no change. I reenabled lazy loading
You should actually disable the “Responsive Images” option, not the lazy loading. Have you tried that?
Best regards,
IsmaelFebruary 25, 2022 at 6:54 am #1342233Yes, but no change. I did some additional searching on this topic and came across this post in the forum – https://kriesi.at/support/topic/responsive-content-images-retina-screens/
Will review it to see if there’s anything I can reapply. Any thoughts on this post?
Best Regards,
JulioFebruary 25, 2022 at 7:22 am #1342235Hi,
Regarding the old thread, the user actually doubled the size of every thumbnails in the theme because he wanted the images to look sharper on retina screens. You don’t really need to do that because the default thumbnails are large enough to cover retina displays.
Best regards,
IsmaelFebruary 27, 2022 at 7:14 am #1342442Thank you Ismael. Still testing between using Color Section with 100% width and Fullwidth Easy Slider for the best results.
Feel free to close this thread. Thank you.
Best Regards,
JulioFebruary 27, 2022 at 12:30 pm #1342455Hi Julio,
Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
AuthorPosts
- The topic ‘Same Size Images on 2 Different Pages Displaying Differently on Mobile’ is closed to new replies.