Do you want to see what your WordPress site will look like on a mobile device?
When you preview the mobile version, you can see how your website looks on phones and other small screens. Even if your site is already up and running, it's often better to look at the mobile version on a desktop computer while it's still being built. Then you can make changes quickly and see how they work.
In this post, we'll show you how to use a desktop computer to see a mobile version of the WordPress site.
How to see the mobile version of a WordPress site on a PC
Why you should look at your mobile layout in advance
More than half of the people who visit your website will do so from their phones. About 3% of people will use a computer.
This means that it's very important to have a site that looks great on mobile.
In fact, mobile is so important that Google's system for ranking websites now uses a "mobile-first" index. This means that Google will use the mobile form of your site to put it in its index. Read our ultimate guide to WordPress SEO to find out more.
Even if you use a flexible WordPress theme, you still need to check how your site looks on mobile. You might want to make different forms of your most important landing pages that are better suited to the needs of mobile users.
Because there are so many different mobile screen sizes and browsers, it's important to remember that most mobile samples won't be perfect. Your last test for a site should always be to look at it on a real mobile device.
So, let's look at how you can view the mobile version of your WordPress site on a PC.
We'll talk about two different ways to use desktop browsers to check how your site looks on mobile devices. You can jump to any part by clicking on the links below:
Method 1: Use the Theme Customizer in WordPress
Method 2: Use Device Mode in Google Chrome's DevTools
Bonus: How to Make Content for Mobile Devices in WordPress
Video lesson
Sign up for WPBeginner
If you would rather have written directions, keep reading.
Method 1: Use the Theme Customizer in WordPress
You can use the WordPress theme customizer to see what your WordPress site will look like on a mobile device.
Just log in to your WordPress account and go to the Appearance ยป Customize screen.
Use the WordPress interface to get to the theme customizer.
This will open the theme customizer for WordPress. We're going to use the Astra theme for this lesson.
Depending on the theme you are using, the menu on the left may have a few different choices.
Look at the choices in the theme customizer
Just click the phone button at the bottom of the screen.
You'll then see a peek of how your site looks on mobile devices.
View sample on a mobile screen
This way of looking at the mobile version is especially helpful if you haven't finished making your blog yet or if it's in repair mode.
You can now make changes to your website and see how they look before you make them live.
Method 2: Use Device Mode in Google Chrome's DevTools
The Google Chrome browser has a set of developer tools that let you run different tests on any website, like seeing a sample of how it looks on mobile devices.
Just open Google Chrome on your personal computer and go to the page you want to check. This could be a sample of a page on your site or even the website of one of your competitors.
Next, right-click on the page and choose "Inspect" from the menu.
Right-clicking will bring up the choice to inspect.
On the right side or at the bottom of the screen, a new panel will appear.
It will probably look like this:
Look at the tool to inspect.
In the developer view, you can see the HTML source code, CSS, and other information about your site.
Next, click the "Toggle Device Toolbar" button to switch to the mobile view.
Toggle the device menu by clicking it.
You'll see a sample of your website that fits the size of a mobile screen.
The mobile view will also change how your site looks in general. For example, the menus will collapse, and new items will move to the left instead of the right.
View the mobile version in the window for the check tool
When you move your mouse over the mobile view of your site, the pointer changes into a circle. You can move this circle with your mouse to make it look like the touchscreen on your phone.
You can also hold down the "Shift" key and click and move your mouse to zoom in or out as if you were pinching the mobile screen.
You will see some extra choices above the mobile view of your site.
Change how you measure response.
With these options, you can do a few more things. You can see how your site would look on different kinds of smartphones.
For example, you can choose a mobile device like an iPhone and see how your site will look on that device.
You can also test how your site works on slow or fast 3G lines. You can even use the rotate button to turn the phone's screen.
Bonus: How to Make Content for Mobile Devices in WordPress
It's important that your website has a flexible design so that people using mobile devices can easily find their way around.
But having a site that is easy to use may not be enough. People who use mobile devices often want different things than people who use desktops.
You can use a lot of paid themes and plugins to make parts that look different on desktop and mobile. You can also update your landing pages in mobile view with a page builder plugin like SeedProd.
Checking out a custom page on a mobile device
You should think about making material for your lead generation forms that works well on mobile devices. On mobile devices, these forms should ask for as little information as possible, ideally just an email address. They should also be easy to open and close and look good.
See our guide on how to make a home page in WordPress for more information.
OptinMonster is another great way to make popups and lead-generation forms that work well on mobile devices. It is the most powerful popup app for WordPress and tool for getting leads on the market.
Change how an ad looks on a mobile
OptinMonster lets you show different ads to mobile users and desktop users based on the type of device they are using. For the best conversions, you can even combine this with OptinMonster's geo-targeting and other advanced personalization tools.
For more information, you can look at our guide on how to make mobile popups that get people to buy.
We hope this article showed you how to see how your site looks on a mobile device. You might also want to see what our experts think are the best tools for turning a WordPress site into a mobile app and how to get more people to visit your blog.
