Archived topic
Images Not Showing The Same On Desktop and Mobile
9 replies · Started by Johnny on May 5, 2022
Hello! As i add images to my content in the desktop view they look fine. When I preview the page in mobile though half of the picture is missing. You can see in the pictures below. What could be the cause of this?
Thank you!
Hi Johnny,
Was the image added using WP core image block?
Does it only happen in editor or frontend as well?
Can you link us to the page where we can see the issue?
I just checked and it is working on the front end it seems! It just doesn't show correctly in the mobile preview. Is that normal?
Hi Johnny,
Yes, this is normal. WP Image Blocks are set to background-size: cover by default. Depending on the aspect-ratio of the image, it may be cropped on different views.
This setting means: “Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.”
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values
Perhaps you can share the link to where this issue is occurring so we can investigate if this is definitely what is occurring?
Hope this clarifies. :)
Ohhhh ookay! Yes, i can definitely share a link! Which link would be best? A link to the published page?
Thanks Fernando!
Yes, please share the link of the published page with the image that are cropped in mobile view :)
Sounds good! Ill include the page in the private information down below. This is the page that was cropping the images on the mobile preview within Wordpress but shows fine on the frotend.
Thank you Ying!
I think the settings are correct, and they are showing correctly on mobile front end.
I assume it's just the WP's block editor preview issue :)
Awesome! thank you so much Ying for your help and assurance!
No problem :)
