The Post and Page Builder provides a convenient way to see how your WordPress website would be seen on a Tablet or Phone. By default, the view is set to Desktop. The option to view with these modes are found while Editing a Page or Post. The following tutorial shows you how to use them within the editor for a Page or Post. This will allow you to see what your site will look like on different devices.
Please note that the WordPress editor device previews are an average representation of each screen-size, and it will vary by device.
How to use the Desktop, Tablet, and Phone Views in the Editor
- In the Dashboard, navigate to Pages or Posts → Show All
- Edit a post or page
- In the Editor, above the DropTab, are three device icons (by default, the view is set to a desktop)
- Click an icon to change the size of the Editor
- In each view you can drag the column handles to change the column size for that device size only
- Click Publish to save your changes
Congratulations, now you know how to use the Desktop, Tablet, and Phone Views in the BoldGrid Editor for WordPress! Remember that while designing your site for various devices, make sure to test your site live in the device your visitors may use most often.
SIGNUP FOR
BOLDGRID CENTRAL
200+ Design Templates + 1 Kick-ass SuperTheme
6 WordPress Plugins + 2 Essential Services
Everything you need to build and manage WordPress websites in one Central place.
KJ says:
Hi,
I am making edit to the Phone View and every time I make an edit, it changes all my other Views (for example my text is now smaller on Desktop View, when I only wanted that change in Phone View).
How do I go about put restrictions on my page edits so that it does not affect all my other Views?
Thank you.
Brandon says:
Hi, thanks for reaching out, the responsive views you see at the top of your page editor are simply to show you how your current elements will display on the respective screen size. If you would like more control over how elements appear on your page use the responsive utilities in Post and Page Builder. This will allow you to hide and restructure elements on specific screen sizes.
KJ says:
Hi Brandon,
This is helpful but how do I keep the changes exclusive from one another.
For example, I change the text size in phone view and that also changes in desktop view. I would like to keep the changes separate from one another.
Brandon says:
Hi KJ Granite and Marble Tile,
Thank you for your BoldGrid Post and Page Builder questions!
The device tabs at the top of your page editor will show you how your page will look in the respective device size but it won’t actually make specific changes a single screen size.
To do this you’ll need to use the responsive utilities in Post and Page Builder. This control will allow you to make an element hidden on certain devices.
I hope this helps. Please let us know if you have any questions on using the responsive utilities!
Alex says:
Why is the only option to hide the elements. If I have an element on desktop, I clearly would want it to show on mobile. But there is no way to resize or make any elements appear properly across various devices. Please explain how that makes sense or is helpful?
Brandon says:
Hi Alex, this guide simply give you a run down of the responsive utilities feature. This feature allows you to hide certain elements on any screen size, which then allows you to reuse that content space to reformat fully functional versions of the same layout for any screen-size. While this is an option, you’re still able to create mobile responsive elements with Post and Page Builder. You can also create globally responsive text and formatting using your Crio theme options.
If you’re having trouble with a specific elements display please start a new forum topic and we’ll look in to coming up with a solution for you on our end right away! Thanks Alex.
Hannah says:
Hi, I have followed the advice above on how to edit your mobile site without changing your desktop site. But every time I edit on the mobile site, it also changes the desktop. I would like to edit the mobile site (as currently it is all over the place), but I want to keep my desktop view as it is. Can you please help? Thank you:)
Jesse says:
Hi Hannah-
The steps in this article are meant to help you see what your page looks like at different screen sizes, but this is a little different from what you’re after, which is to make changes on one size that don’t apply to another size. For this, you can use the Responsive Utilities in the Post and Page Builder to either show or hide blocks on different screens.
Kate says:
Hi there
The phone view looks great when I look at it in preview on my wordpress site. The phone view when I check out my website on my phone looks nothing like it. All the alignment has gone out the window… What can I do about this?
Jesse says:
Hi Kate-
Can you fill out a new question in our support forum so we can take a look and get you all fixed up? This can depend on things like what background image and theme you’re using, so be sure to enter your Website URL (it won’t be made public).
Cynthia says:
I have an image as my background. I’m switching between desktop and mobile. Everything looks great! After I publish it. I look at the site on my physical phone and the background image is only showing the top left portion of the image instead of the full picture. Help!
Jesse says:
Hello Cynthia-
Sorry to hear about the frustration. There are a few known issues with some background images and iOS mobile devices. Check out these instructions on how to fix background images on iOS.
Joshin says:
Perhaps it is because of iPad OS now preferring a desktop version of websites, but the Desktop versus Tablet/Phone views are not working correctly for me on my iPad Pro. The portrait orientation of a standard iPad will show the tablet view but the landscape orientation of the same page seems to show the desktop version. Does BoldGrid have an updated version that will still show the correct mode in all cases?
Jesse says:
Hello Joshin,
Thanks for the excellent question. With the proliferation of different devices and screen resolutions, this is one of the more difficult web design challenges in the current landscape. The BoldGrid Theme Framework relies on a framework called Bootstrap, which changes the style of the page at different sizes. Most of BoldGrid’s themes, including BoldGrid Swifty, have their first breakpoint at a width of 992px- meaning that the desktop display shows for all screen widths 992 pixels or larger, and tablet for 991 and lower. However, the iPad Pro’s resolution at 2x Retina Display is 1366px in landscape mode.
This effectively means that the iPad Pro has the resolution to support Desktop mode. Our newest theme, Crio, does use the newest version of the Bootstrap framework which includes support for more screen sizes, but it still does display the Desktop style at that width. Feel free to make a feature request if you’d like to see more support for larger mobile styles, our development team would welcome the feedback!