How Do You Make WordPress Mobile View The Same As Desktop View?
We have seen this question asked many times and we wanted to try and answer it as best as we can.
The simple answer is that you won’t be able to make it 100% the same because of the size difference. Elements just won’t show the same on both the desktop and mobile views.
However, You can view your website in “Mobile” view and make adjustments that way. This will help you with designing your site for mobile devices.
You can check your site out on your phone but this is really not a convenient method while you are designing your site or page.
Side Note: It is suggested by the experts to create landing pages specifically for mobile devices. There are many premium themes that allow for elements and these can be made specifically for the mobile view.
In this article we will show you the different ways on how to view your site in the “Mobile View”.
Note: If your site is built to be mobile responsive it will automatically resize for every device that views the content. So there is no actual need to view your site in “Mobile” view other than to check that everything on your webpage fits.
So how do you make WordPress mobile view the same as desktop view?
How To View Your Website In Mobile View.
There are three ways to do this based on what you are trying to accomplish. The first way is through the customize option, the second is directly on the page or post you are creating, and the third is through the inspect menu.
First Way: Customizer
Click on “Appearance”.
Then “Customize”.
Or
Just click on “Customize Your Site” on the dashboard menu.
Scroll down to the bottom of the customize screen and click on the mobile icon.
Then You will see your site in mobile view.
This is how you customize your site with the mobile view in mind.
The Second Way
Edit Page or Post in Mobile View (Block Editor)
Highlight Page (or Posts) in the WordPress back office and click on “Add New”.
At the top of the post (or page) on the right-hand side you will see “Preview”.
Click on “Preview” and then click on “Mobile”.
Now as you add text and images you will be able to customize and optimize for mobile phones.
Third Way
On ANY web page you left click on the mouse and a menu will appear. Scroll down the menu and click on “Inspect”.
Then Click on the paper icon at the top right. When you highlight the icon, it says “Toggle Device Toolbar”. Now you can toggle between mobile and desktop view for any webpage.
Mobile Responsive Themes
Having a mobile responsive site is the best thing you can do for your website. This makes the resizing of the site for any device easy, quick, and on demand.
Check to see if your theme is mobile responsive like Generate Press and Kadence. We recommend both themes as they are mobile responsive, fast, lightweight, and SEO friendly.
You can of course use an AMP plugin (Accelerated Mobile Pages) but most website owners come across some sort of issues with these plugins.
For Example,
- Images won’t resize.
- 404 Errors
- Blank Pages
- Removing branding elements like graphics, animations, and high-definition images.
- Validation errors
Suffice it to say it is better just to start with a mobile responsive theme. This is especially beneficial because the majority of people use their phones to view anything on the web and your site will instantly be ready for that traffic.
If you don’t have a mobile responsive site, it is time to get one!
Plugins
You also need to make sure your plugins are mobile responsive and coded well. Bad coding and unresponsive plugins will cause a giant mess on your site.
Make sure you back up your files BEFORE you add a plugin. If the plugin messes up your site you will want the ability to restore your site.
Test for sight speed every time you add a new plugin. If the plugin bogs down your site you will find out through this test. Try Google’s PageSpeed Insights
Check mobile view to verify that everything is working. This is just to double check that your site looks the way you want it to and that nothing is amiss.
Final Words
There are 3 ways (that we know of) to view your content in “Mobile View”. Having a mobile responsive website is the best way to go so that the website automatically adjusts to the screen size. You can also toggle it so that you can see what your webpage will look like on tablet devices.
GeneratePress and Kadence are the two themes we recommend for any type of WordPress sites and they are built to be mobile responsive from the start.
If you don’t have a mobile responsive theme it is time to upgrade and get one immediately. If you have an online business you need to stay current with online technology for your visitors.
