I’ll walk you through how to view the mobile version of your WordPress sites from your desktop.
This is great if you’re designing your site and you want to see what it looks like and the mobile phone but you don’t want to actually go to your mobile phone to do it. I’ll show you two different methods that you can do to get this going. So if you’re ready let’s dive in the first method that we’ll use is actually from the backend of your WordPress dashboard.
So you want to log in to your dashboard from here. Let’s head over to appearance customize from here you’ll see all the different areas that you can edit while you’re in the customize area you.
Also have all these tabs what you want to do is come all the way down here and you have these three different area. She one is to view it and desktop
the next one is to view it in tablet
and then finally you can see what it looks like on a mobile phone
and then you can make whatever changes you need from here to adjust that. Don’t worry when you see these little blue dots they’re only present.
When you’re in preview mode so that you can customize it once your site goes live these items aren’t actually going to be there for you great so that’s from looking at it from the backend of your WordPress dashboard.
The next method I’m going to show you is actually from viewing it from the front end of your website.
So I’m going to open up my website in a new window. I’m using Chrome for this a lot of browsers will have their own developer tools but to show you what this looks like you can right-click anywhere on your website go all the way down and find the inspect button
and what that will do is it’ll bring up your CSS and all the information of your website.
Here what you want to do is there’s a little toggle device here that when we click on it you see it’s toggling between different sizes.
You can actually get a little bit more granular and choose from many popular phone sizes here that way you can see what your site will look like.
You can even interact with it you see instead of having a cursor we have a little gray blob. That’s to show it somebody’s using their finger to scroll through so that looks good.
Then you can also even go into a little bit more to show what your site would look like if somebody’s on a low in mobile and the data is more difficult to get to you can just get a little bit more granular on this.
But the biggest thing is to be able to see what your site looks like as a mobile device from your desktop. Then you can use great page builder plugins such as say beaver builder to adjust how your site looks and to adjust the theme for your site so it looks even better on mobile