WordPress has been a revolution in terms of building a website. You don’t need coding knowledge to build a website here. That is why WordPress powers almost 42% of the website on the internet.
The functionalities are uncountable in this platform. And it comes with some pretty neat tools to manage and edit images. You can easily upload photos, align them, create grids, and even regulate them inside WordPress.
Some users complain that they see images in the web version but can not see them in the mobile version.
For example, you have changed your current theme or any other plugin related to the image. It can be a cause behind images not showing. Another reason can be your current web hosting. These are the possible ways.
Here, the top 3 reasons behind this problem are utilized and shared with you so that you can avoid them.
Issues with Plugins/Themes for Images Not Showing on Mobile
Mostly these issues are related to WordPress. The prime reason can be plugin or theme conflict. To solve this issue, first, analyze if any friction or other problem occurs in the plugin. If yes, disable all the plugins running on your site. Next, switch to your default theme that is activated on your site.
If the issue is solved, then you can enable the plugin and activate your theme. Or you can search for a plugin that may help to diagnose your site.
These kinds of plugins are designed to help users to find out the issues without affecting the normal traffic flow of your site.
1. Page Builder-Related Issues
If you used page builders like Elementor or Divi Builder to create your website, then image related issues could occur. To solve this problem, scroll to the bottom of the Elementor. Go to Settings >>Responsive Mode: choose the mobile view. Finally, drag and drop the image you wish to display.
You can use CSS to display the images. It might not be the best option. However, you can give this code a try:
Add the CSS code below to your current active child theme’s style.css file or you can add a CSS option in the theme’s customizer:
@media (max-width: 767px){
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block;
}
}The code above can fix the image related issue on the mobile site. But another issue arose with that. That is images disappear from a desktop browser when you minimize the browser size past a certain size.
Then you can try this code :
Go to the “Edit page with Elementor”. Next click on Section>>Advanced>>Responsive and turn off the hidden on mobile option. Or you can add the below code to the Customize>>Custom CSS section to fix it:
@media (max-width: 767px)
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block !important;
}
2. The Theme is Not Updated on a Regular Basis
Many kinds of themes are available in the WordPress repository. Most of them need regular updates. If you don’t update them regularly, then images not showing on mobile devices type of issue can happen frequently.
Theme related image-based issues can be versatile. They can occur because of using any old theme or free theme that only gets updated occasionally. When WordPress core update and your free themes irregular update do not synchronize, then images not showing up on mobile type error occurs.
As a solution, you can change your current theme to WordPress’s default one. As it gets regular updates, by switching to this theme, you will be able to determine whether the issue is theme-related or not.
3. Not Using Image Optimization
Uploading optimized images is always effective in improving website performance. That’s why many WordPress users use image optimization plugins on their websites. But without proper knowledge, if you use these types of plugins, then it could convert your images into a format not recognized by your theme or incompatible with it.
You could have a problem with a “Lazy Loading” plugin too. However, WordPress now has .webp format support.
These are the common issues that may cause images not to show on any mobile device. So if you are facing these problems, go through the list and make sure everything is up to date.
FAQ(s)
Question 1: How do I fix WordPress mobile view?
Answer:
I. Select the column you want to customize.
ii. On the left side, panel click on the Advanced tab.
iii. Find the responsive dropdown to find the options to enable/disable the visibility of the column or element on that size.
iv. Customize your option.
v. Hit the Save Changes.
Question 2: How do I optimize images for WordPress mobile?
Answer: You need to compress your images before uploading. You will find many compression tools that don’t compromise the quality of the images. There are a lot of plugins and tools dedicated entirely to image compression.
Question 3: How do I turn on mobile view in WordPress?
Answer: You need to log in to your WordPress dashboard. From there go to the Appearance » Customize screen. At the bottom of the screen, click the mobile icon. You’ll then see a preview of how your site looks on mobile devices.
Question 4: Why are images loading slowly?
Answer: If you have a lot of unoptimized images on your website then it can cause the issue of slow loading.
High-resolution images can consume lots of bandwidth while loading. Uploading larger-sized images and then scaling them down can unnecessarily increase the size of your web page.
Final Word
Hopefully, these tactics will help you solve the question, why WordPress images not showing on mobile. WordPress is an open source vast community. It allows different kinds of contributions from creative and talented developers who are constantly looking to improve WordPress for their users.
But as many plugins and coding are involved here, the overall process gets complex. So sometimes, lack of knowledge on the users’ end can be the main issue. Finally, it’s clear that with the help of the community, overcoming these problems is possible for sure.
You can also read (Image Grid in HTML CSS: Detailed Guide with Essential Codes)?