Help! My WordPress Site Looks Different on Mobile
However, even if your WordPress website is responsive, it can still display differently from what you intended on mobile. Read on to discover five common reasons behind why your WordPress site could look different on mobile.
What is responsive design?
Responsive design became significant as soon as devices other than desktop came on the scene. Web developers needed a way for websites to look natural on mobile devices and tablets — in other words, devices with smaller screens.
Responsive design optimizes your site, so it looks its best on each device it appears on. With a responsive design, your WordPress site scales its content and adapts to fit the different dimensions of each device screen.
When you have a responsive WordPress site, you’ll reduce unnecessary resizing, scrolling, zooming, and panning that users otherwise experience when they navigate an unresponsive site. It also eliminates the need for separate websites built for different devices.
Much of why your site’s WordPress mobile version doesn’t match the desktop version stems from the responsiveness of your website.
If your site is entirely unresponsive, well, it will look exactly like your desktop, but you’ll have usability issues that will prevent mobile users from sticking around. Users are 52% less likely to engage with a company with a lousy mobile version of their site.
So first, test your site to make sure it’s responsive.
Why does my theme look bad on mobile?
Ask yourself these questions to find out:
- Do you have a responsive theme?
- Does your media scale?
- Are you using accelerated mobile pages (AMP)?
- Are you using mobile theme plugins?
Several things could cause your WordPress website to look different on mobile versus desktop, even if you do have a mobile-responsive site.
If you find yourself asking “why does my theme look bad on mobile,” here are four questions to ask yourself to find out why, along with how to make your WordPress site mobile more friendly.
Do you have a responsive theme?
If you don’t have a mobile-responsive WordPress theme, it’s important that you get one. Your WordPress theme is the simplest way to convert a WordPress website to mobile.
An unresponsive theme will show your site exactly as it is on your desktop, to mobile users. This may not sound bad until you think about the dimension difference between your desktop screen and your mobile screen.
Your horizontal desktop setup doesn’t translate too well to a vertical mobile screen. And because of the size difference, your site will appear tiny on mobile, which severely affects your site’s user experience (UX).
And while a mobile-responsive theme won’t look 100% the same on both desktop and mobile since many elements get shuffled into a single column, the change is valuable because it improves your site’s UX on mobile. This means your viewers will have a more accessible and more engaging time perusing your site on any device.
How to make your WordPress site mobile friendly with a responsive design:
When you browse for themes on WordPress, you can preview the template. To check if the theme is responsive, you can drag the edge of your browser.
You can also view your site in developer mode using Ctrl+Shift+I or right-clicking and selecting “Inspect.”
If your theme is not responsive, find one that is and update your site. A good, responsive theme won’t make your WordPress site look bad on mobile.
Just like themes, some plugins might not be responsive. Check to see if they are by.
If any of your plugins are not mobile-responsive, they may do interesting things to the layout of your mobile version, causing the mobile version of your WordPress site to look different from the desktop version.
Change out your unresponsive plugins for responsive plugins that accomplish the same task.
Does your media scale?
If the media on your site doesn’t scale, it can make the mobile version of your WordPress site look clunky.
What this means is that images and other elements won’t fit the screen when viewed on different devices. Non-scaling media will often sit much wider than the mobile screen, interrupting your site’s UX and making your WordPress site look messy and unprofessional.
When the media on your site is appropriately scaled, you boost the UX and appeal of the mobile version of your WordPress website, and you’ll increase your leads and sales.
Check out this men’s outfitter ecommerce company, Stag Provisions, looks on mobile.
How to make your WordPress site mobile friendly by making content scalable:
Make sure to check the file sizes of your media. Large files can drag down the loading speed of your site, and they may not load at all upon page-load, both of which can sometimes make your website look different on mobile due to its lower processing power than a desktop.
You can compress your files with sites like Kraken.io or ShortPixel (both have WordPress plugins). Compressing your media will improve your page speed for both desktop and mobile.
If the media on your site isn’t essential to your mobile design, the WP Mobile Detect plugin will let you use short codes in your post to define which elements you want to hide, which will clean up your mobile site (in the case of an infographic or pop-up form that shows poorly on mobile).
Are you using accelerated mobile pages (AMP)?
AMPs are cached pages of your site shown on mobile. The cached pages are stripped down to only the essential elements and code, creating a light page that loads quickly on mobile.
Including accelerated mobile pages in your WordPress site is optimal for good viewing experience on mobile, and it provides optimization options for desktop as well. But, it does mean that your WordPress site will look different on mobile, having a sparser layout and design.
Creating AMP caches for your page will:
- Rank your page higher on Google’s search pages
- Provide a faster load speed on mobile and desktop
- Give users a better experience
So, it’s worth it to implement for your WordPress website.
How to make your WordPress site mobile friendly by using AMP:
The AMP plugin is the official AMP plugin for WordPress, but there’s also the AMP for WP plugin, both popular plugins for implementing AMP on your WordPress site.
You can always disable any of your plugins for implementing AMP if you want the mobile version of your site back at full-form.
Are you using mobile theme plugins?
The Jetpack plugin is a free WordPress security plugin by Automattic. It does more than just secure your website, it also helps you optimize your page for SEO and create compelling content.
But it could also cause your mobile theme to appear different from the one you have set up for your desktop version. Jetpack has a mobile theme module that overrides your desktop theme, and it’s quite common for this to cause your mobile and desktop sites to look completely different.
Jetpack has this module to let your site work correctly on mobile, making your site mobile-responsive if your theme doesn’t have it built-in. But because most themes currently are built to be mobile-responsive, you won’t need this module enabled.
Additionally, some plugins, like WPtouch, work similarly to Jetpack’s mobile theme module. The WPtouch plugin creates a separate theme for your site’s mobile version, so if you have this plugin enabled, your mobile and desktop versions will look different.
Disable the plugin if you want to use the same theme for both.
How to make your WordPress site mobile friendly by disabling Jetpack:
You can disable the module by navigating this file path in your WordPress dashboard.
- Jetpack > Settings > Writing tab
- Scroll down to “Theme enhancements”
- Turn off “Enable the Jetpack Mobile theme”
After that, check your site on mobile to see if your mobile site now runs the same theme as your desktop version.
Get a Custom Web Design Quote From WebFX
How much does it cost to build the website of your dreams?
Use our FREE website design cost calculator to get an idea!
Web Design Cost Calculator
When WebFX designs your website, we make it responsive from the get-go. Just check out our award-winning portfolio of over 1,600 websites we’ve designed for clients like you!
We place each element on your page with responsiveness in mind. We make sure that your website looks exactly how you want it on every single device.
If something isn’t working correctly on your WordPress website, we’ll troubleshoot it for you so that you never have to wonder “Why does my WordPress site look different on mobile” ever again.