WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» How to View the Mobile Version of WordPress Sites from Desktop

How to View the Mobile Version of WordPress Sites from Desktop

Last updated on February 13th, 2020 by Editorial Staff
146 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to View the Mobile Version of WordPress Sites from Desktop

Do you want to preview the mobile version of your WordPress site? Previewing the mobile layout helps you see how your website looks on mobile devices.

While you can certainly take a look at your live site on your phone, this doesn’t help during the development stage.

Even when your site is live, it’s often easier to view the mobile version on a desktop computer, so you can quickly make changes and see their effect.

In this article, we’ll show you two simple ways to easily preview the mobile layout of your WordPress site without switching to different devices.

Preview the mobile layout of your website

Why You Should Preview Your Mobile Layout

More than 50% of your website visitors will be using their mobile phones to access your site. Around 3% will be using a tablet.

This means that having a site that looks great on mobile is essential.

In fact, mobile is so important that Google is now using a “mobile-first” index for their website ranking algorithm.

Even if you’re using a responsive WordPress theme, you still need to check how your site looks on mobile. You might even want to create different versions of key landing pages that are optimized for mobile users’ needs (more on this later).

In this article, we’re going to cover two different methods of testing how your site looks on mobile using desktop browsers.

It’s important to keep in mind that most mobile previews will not be completely perfect because there are so many different mobile screen sizes and browsers. Your final test should always be to look at your site on an actual mobile device.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

1. Using WordPress’s Theme Customizer

You can use the WordPress theme customizer to preview the mobile version of your WordPress site.

Simply login to your WordPress dashboard and go to Appearance » Customize screen.

WordPress dashboard showing where to find Appearance - Customize

This will open up the WordPress theme customizer. Depending on what theme you’re using, you may see slightly different options in the left hand menu here:

WordPress theme customizer (desktop view)

At the bottom of the screen, click the mobile icon. You’ll then see a preview of how your site looks on mobile devices.

Switching to mobile view in the theme customizer

Note: The blue editing symbols are only present in the previewer. You won’t see these on your live site.

This method of previewing the mobile version is particularly useful when you’ve not yet finished creating your blog, or when it’s under maintenance mode.

You can make changes and check how they look before you put them live.

2. Using Google Chrome’s DevTools Device Mode

Google Chrome browser has a set of developer tools that let you run various checks on any website, including seeing a preview of how your website looks on mobile devices.

Simply open the Google Chrome browser on your desktop and visit the page you want to check.

This could be the preview of a page on your site, or it could even be your competitors website.

Next, you need to right-click on the page and select ‘Inspect’.

Selecting the Inspect option in Chrome

A new pane will open up on the right-hand side, like this:

The default desktop view when inspecting your site in Chrome

In the developer view, you will be able to see your site’s HTML source code.

Next, click the ‘Toggle Device Toolbar’ button to change to the mobile view.

Inspecting the mobile view of your site in Chrome

You’ll notice the preview of your website will shrink to the mobile screen size.

You’ll also notice your website’s appearance change to the mobile view. In the example above, the menu has collapsed and the Search icon has moved to the left instead of the right of the menu.

When you run your mouse cursor over the mobile view of your site, it’ll become a circle, like this:

The circular mouse cursor in Chrome's Inspect view

This circle can be moved with your mouse to mimic the touchscreen on a mobile device.

You can also hold down the ‘Shift’ key, then click and move your mouse to simulate pinching the mobile screen to zoom in or out.

Above the mobile view of your site, you’ll see some additional options.

Additional mobile options for inspecting your site in Chrome

These let you do several extra things. You can check how your site would look on different types of smart phones. You can also simulate your site’s performance on fast or slow 3G connections. You can even rotate the mobile screen using the rotate icon.

How to Create Mobile Specific Content in WordPress

It’s important that your website has a responsive design, so your mobile visitors can easily navigate your website.

But simply having a responsive site may not go far enough. Users on mobile devices are often looking for different things than Desktop users.

Many premium themes and plugins let you create elements that display differently on desktop versus mobile. You can also use a page builder plugin like Beaver Builder to edit your landing pages in mobile view.

You should definitely create mobile-specific content for your lead generation forms. On mobile devices, these should ask for minimal information, ideally just an email address. They should also look good and be easy to close.

A great way to create mobile specific popups and lead-generation form is with OptinMonster. It is the most powerful WordPress popup plugin and lead generation tool in the market.

They have specific device targeting display rules that let you show different campaigns to mobile users vs desktop users. You can even combine that with OptinMonster’s geo-targeting feature and other advanced personalization features to get the best conversion.

We hope this article helped you learn how to preview the mobile layout of your site. You may also want to take a look at our article on the best plugins to convert a WordPress site into a mobile app.

Bonus: check out our pick of the best business phone services, so you can add a click to call button for mobile users.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

146 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

8 Comments

Leave a Reply
  1. Sakirah says:
    Oct 16, 2020 at 10:06 pm

    Hello, I have a problem with loading my site on mobile. It displays as Mobile Site view, classic version without theme. I have to click View Full Site at the bottom to display the responsive theme. I want to force View Full Site so that the responsive theme is auto display to any mobile.

    Reply
    • WPBeginner Support says:
      Oct 19, 2020 at 10:06 am

      You would want to check your site to see if you have a plugin that would be enabling that mobile view as that should not be default WordPress behavior.

      Reply
  2. daniel says:
    Aug 17, 2020 at 2:21 pm

    there’s a much easier way to do this just by clicking the inspect tool and enable mobile mode ( button on the yop left with a phone icon ).

    Reply
    • WPBeginner Support says:
      Aug 18, 2020 at 11:00 am

      That is method 2 in this article.

      Reply
  3. Larissa mokom says:
    May 25, 2020 at 8:15 pm

    Hello, Thank you for all the information you are sharing on here i am able to follow your guides step by step to be able to come up with my blog my question is how would i be able to fix the problem of my widgets ( home,about, contact us) not displaying when my website is pulled on a mobile device but on a computer everything is looking good.

    Reply
    • WPBeginner Support says:
      May 27, 2020 at 9:21 am

      You would want to reach out to your theme’s support to ensure this isn’t a choice based on the theme’s styling.

      Reply
  4. Samson Onuegbu says:
    Feb 23, 2020 at 3:51 am

    Whoa!

    WPbeginner always give the best hacks that many never know existed.

    We will be launching our site soon and you have just made my responsive site building job easier.

    Thanks a lot!

    Reply
    • WPBeginner Support says:
      Feb 24, 2020 at 11:42 am

      You’re welcome, glad you found our recommendations helpful :)

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
PushEngage
PushEngage
Increase your website traffic & revenue with push notifications. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Elegant Themes
Elegant Themes Deal
Get the Divi theme with 194+ template packs from Elegant Themes for only $89. Extra, Bloom, and Monarch included free!
TeslaThemes
TeslaThemes Coupon
Get 20% off on TeslaThemes large collection of premium WordPress themes.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.