Disclosure: This post contains affiliate links. I may receive compensation when you click on links to products in this post. For an explanation of my Advertising Policy, visit this page. Thanks for reading!
Why are my WordPress changes not showing on mobile?
If you’ve made changes to your WordPress site and they’re not appearing on mobile, there are a few things you can check.
In some cases, your changes may be hidden from view on mobile devices for design reasons.
However, if you’re sure that your changes should be appearing on mobile devices and they’re not, there are a few things you can do to troubleshoot the issue.
Make sure that your WordPress theme is responsive.
A responsive theme will automatically adjust its layout depending on the size of the device it’s being viewed on.
If your theme is not responsive, your changes may not appear on mobile devices. You can check responsiveness by viewing your site on a mobile device.
Also make sure that your changes are not being hidden from mobile devices for design reasons.
To see if this is the case, you can either change the “Screen Options” option in your WordPress dashboard or try viewing the site on a different browser (like Chrome or Firefox), which may give access to options that are otherwise hidden.
Plugins.
If the changes appear on the other browser, there may be a plugin causing an issue.
If your theme is responsive and you’ve checked all of its settings, try deactivating all plugins and then reactivating them one at a time to check for which plugin may be causing the conflict.
You can also create a new WordPress site with the same theme to see if the changes still appear. If they do, then the issue is likely with a plugin.
If you’ve tried all of these troubleshooting steps and your changes are still not appearing on mobile devices, reach out to your hosting provider or WordPress developer for assistance.
They may be able to help identify the source of the issue and correct it.
How do I update my mobile site on WordPress?
Updating your mobile site on WordPress can actually be a very simple process, however, only if you know PHP and are comfortable working with it.
If not, contact your theme’s developer and ask for their assistance.
But if you know PHP, then all you need to do is follow these steps:
1. Log in to your WordPress dashboard.
2. Click on the “Appearance” menu and then select “Editor”.
3. From the editor screen, select the “header.php” file from the list on the right-hand side.
4. Edit the file and add the following code snippet to the top of it:
<?php if (is_mobile()) { ?>
<link rel=”stylesheet” href=”http://www.yourdomain.com/wp-content/mu-plugins/mobile_stylesheet.css” type=”text/css” media=”screen and (max-device-width: 480px)”/>
<?php } ?>
5. Refresh your mobile site, or just copy the new link into your phone’s browser to check that it is working as expected.
6. Finally, save your changes and upload them to the server using FTP or whichever method you usually use to update files on your web server.
Why does my website look different on mobile?
There are a few reasons why your website looks different on mobile, let’s try to troubleshoot them.
First, it’s important to understand that not all websites are created equal. Websites are designed in different ways, have different content, and are viewed on different devices.
All of these factors can play a role in what you see when you view your website on mobile.
There’s also the possibility that your website is not being displayed properly on some or all mobile devices.
Many web browsers use built-in formatting for their sites, But sometimes they don’t give that formatting or those features to other sites.
Let’s go through some of the most common reasons your site may look different on mobile and what you can do about it.
Mobile optimization.
Do you know if your website has a mobile version? While more and more websites are switching to responsive layouts, not every site is created equal. One size certainly does not fit all.
Responsive layouts are optimized for display on any screen size. If your website has a mobile layout, it will automatically appear on mobile devices to best suit the screen size of that device (no action required).
If you’re unsure if your site has a mobile version, check with your developer or hosting company to see if it’s been created. If it hasn’t, it’s time to consider a responsive design.
Not all browsers support responsive design.
As I’ve mentioned before, not all browsers support responsive design layouts. Some will show your website in its desktop form, regardless of the device you’re using.
This is because the browser is trying to display the website the way it was designed, not taking into account the size of the screen.
There are a few ways to work around this:
1) Use media queries.
Media queries allow you to change how your website looks based on the size of the screen. You can target different devices, or set a maximum width for your site.
For this you will need to know some CSS and or PHP depending on your theme.
Many theme support forums can help walk you through issues like this. GeneratePress is one of them.
Believe me, if you have this problem, someone else has had this problem before.
2) You can use Google’s Viewport Resizer – Responsive Testing Tool or use a plugin like WPtouch.
These will help change how your website looks for mobile devices, without you having to do any coding.
3) Use a theme that is responsive or has a mobile layout.
If you’re not sure if your theme is responsive, check the developer’s website or contact them to see if it’s available.
4) Mobile design guidelines.
There are guidelines you can use to make sure your website is displayed correctly on mobile browsers, including the size of content elements, how it displays images, etc.
This is an important step in making sure your website looks good and functions well for all users – desktop or mobile!
The official WordPress mobile apps page also has lots of tips for creating a mobile version of your site (if you don’t have one).
How do I make my WordPress website mobile-friendly?
The answer again is, that it depends on your WordPress theme.
Most WordPress themes are mobile-friendly out of the box, but there are a few exceptions.
If your theme is not mobile-friendly, then you will need to use a plugin or make some changes to your theme.
First, let’s get the obvious part out of the way: Your WordPress website should be hosted on a fast and reliable hosting provider.
If your site is slow or unresponsive then Google will lower your rankings. This means that even if your website looks good on mobile devices, it doesn’t matter.
A lot of WordPress hosting providers don’t report response time for their shared hosting plans.
But if you host your site elsewhere then the Pingdom Tools plugin is a good way to see how fast your page loads.
The second thing that affects mobile-friendliness is the size of your images. If you have big, heavy images then Google will not be able to display them on a mobile device.
If your page takes too long to load even on a fast connection, then Google will lower your rankings.
The solution is simple: use the TinyPNG WordPress plugin. The plugin reduces the size of all your images by optimizing them with TinyPNG’s cloud-based service. The plugin compresses JPEG, PNG and GIF images.
When you have optimized all your images with TinyPNG, you need to check the pages in Google’s mobile friendly test.
You can also use your mobile device or a mobile emulator to see how it looks on different devices. If something doesn’t look good, then you can make the necessary changes.
If your website is still not mobile-friendly, then you need to get yourself a responsive WordPress theme.
A responsive theme will automatically adjust the size and layout of your website based on the device that is being used.
There are a lot of responsive themes available, but my personal favorite is the GeneratePress Framework from Tom Usborne.
It is a lightweight theme with a lot of features. It doesn’t come with all the bloat and useless options that you find in most themes. Instead, it focuses on making your site responsive and fast.
The best part about this theme is that it’s completely customizable through the WordPress Customizer. You can design your own theme without writing a single line of code.
The theme is also easy to extend with free and paid WordPress plugins. I have installed several plugins on this site that add extra functionality, but you don’t have to install anything if you don’t need it.
If you use a different theme, then you should check Google’s guide to making your theme mobile-friendly.
The guide has several sections that need to be completed. For example, if you use an advanced theme then it will have widget areas that you need to check.
If your website is not mobile-friendly then Google can penalize your rankings or even take down your entire website.
It’s important to make sure that your site looks and works great on all devices.
WordPress Changes Not Showing on Mobile. Summary.
It’s clear that the WordPress team has been trying to push users into a more mobile-friendly experience with every update and it’s only going to be more so as time moves on.
The latest updates have been released with an increased effort to make it easier for people on their phones and tablets to navigate your site by giving them quick access to your most viewed content.
The conclusion of this blog post is that even if you update your WordPress site, the changes won’t always show up on mobile or right away.
It’s important to make sure all devices are considered when choosing a website theme or even a web page design because there are many different people with many different preferences for viewing content.
So always get yourself a theme that is responsive and designed to work well with all devices, including mobile, like GeneratePress!
