Answer

Checking mobile display using a desktop computer

Many people access the internet primarily using their phones and tablets, so you want to be sure your content looks good on mobile devices. Here's how to view what it will look like on a phone using your your desktop browser. 

Chrome, Edge, and other Chromium Browsers

Most browsers have an easy way to view content as if it were on a mobile device, so you can easily check how your content will display on a phone while you are working on it using the browser "Inspect element" feature. (Note: The instructions for Safari are more complicated, and are described here.)

  • Preview or view the website page you want to check.
  • Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.

Right click pop-up menu. Inspect is listed last in the menu. A red arrow points towards the Inspect choice.

  • For Chrome, Edge, and other Chromium based browsers, a panel will open up on the right side of the browser. Chrome & Edge "Inspect" panel

Chrome showing LWVMD page. The Inspect panel is open on the right side of the page 

 

  • Look for the phone/tablet icon on the top toolbar on the left side of the toolbar. Click this icon to switch between phone and computer screen views.

Phone and Tablet icon

Firefox

  • Preview or view the website page you want to check.
  • Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.
  • In Firefox, the inspect panel will be at the bottom of the screen.

Firefox "Inspect" panel

Firefox showing LWVMD page. The Inspect panel is open on the bottom of the page 

  • Look for the phone/tablet icon on the top toolbar on the right side of the toolbar. Click this icon to switch between phone and computer screen views.

Phone and Tablet icon

 

Safari

Detailed instructions for mobile view in Safari on a desktop computer can be found here.