Images broken on mobile

Hi @srd75,

I’ve checked the page URL you provided however I can’t replicate the issue.

See: https://www.loom.com/share/5db3de3a64bd4b07abee968430eebf3e?sid=2539c09e-90e4-4c39-a056-47b0bd9a7551

Could you please provide us with a screen recording of the issue so we can further investigate? You can use tool such as loom.com to record your screen.

Kind regards,

Hi @ricav

If we resize the desktop browser down to tablet width, most of the images don’t show:

Also, on a real mobile device, none of the images show (logged out of WP).

Help appreciated.

Hello. Thank you for the replies.

I just checked the page on a mobile device and see that all images, except the first one, are displaying correctly within the Toggle widgets, so it appears you have identified the issue.

As the first image is appearing as a broken link, please try deleting the image and re-uploading it to see if this helps.

If it does not, let us know and we’ll do our best to assist further.

Kind Regards.

Hi,

Thanks for your assistance.

When we replaced the images with new images, all those new images were broken, see https://staging.silcgroup.com/about/team-old/

When editing the first toggle seen on mobile view of https://staging.silcgroup.com/about/team/, the image is not broken:

The image code is

<img class="alignnone size-medium wp-image-25796" src="https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones.jpg" alt="Koby Jones" width="200px" />

On the front end, this code becomes:

<img decoding="async" src="https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones.jpg" alt="Koby Jones" width="200px" class="alignnone size-medium wp-image-25796" srcset="https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones.jpg 938w, https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones-261x300.jpg 261w, https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones-889x1024.jpg 889w, https://staging.silcgroup.com/wp-content/uploads/2024/02/Koby-Jones-768x884.jpg 768w, https://staging.silcgroup.com/wp-content/uploads/2024/02/elementor/thumbs/Koby-Jones-150x150.jpg 1042w" sizes="(max-width: 938px) 100vw, 938px">

It seems the broken image on the front end is

https://staging.silcgroup.com/wp-content/uploads/2024/02/elementor/thumbs/Koby-Jones-150x150.jpg

which is a 404.

Help appreciated.

Hello, and thank you for following up.

I tried to replicate the issue in my test environment by inserting two images from my test site’s media library and inserting the URL of the image you referenced in your reply (Kolby Jones) into the Toggle widget, and all of the images appear correctly on the front end on mobile devices.

As the code in the browser’s console appears to be correct and the images appear correctly on my test site, it seems the issue is specific to the site’s environment.

Please try the following…toggle on and off the responsive settings of the images that are not showing up by taking the following steps:

• In the Editor, select the widget in which the images are located (in this case, the Toggle widget).
• In the widget panel, go to the Advanced tab > Responsive > Hide on Mobile Portrait.
• Toggle this feature on and off to see if it resolves the issue.

If this does not help, please try the standard troubleshooting steps to rule out the possibility of a conflict with another plugin or the theme:

• Deactivate all of your plugins except Elementor. If this solves the problem, gradually activate your plugins one by one, until you spot the problematic plugin.
• If the above does not help, temporarily switch your WordPress theme to Hello Elementor (or another default WordPress theme).

Let us know how it goes.

Kind Regards.