Using Desktop, Tablet, and Phone Views | BoldGrid

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

  1. In the Dashboard, navigate to Pages or Posts → Show All
  2. Edit a post or page
  3. In the Editor, above the DropTab, are three device icons (by default, the view is set to a desktop)
  4. Click an icon to change the size of the Editor
  5. In each view you can drag the column handles to change the column size for that device size only
  6. 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.

6 thoughts on “Using the Desktop, Tablet, and Phone Views

  1. 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?

  2. 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!

  3. 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?

    • 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!

Leave a Reply

Your email address will not be published. Required fields are marked *