When adding images and videos, it’s best to make them no wider than they need to be. This helps preserve the correct design layout and helps significantly with page load and download times. Follow these instructions to determine the dimensions of any element on your web page, including the width of your content area:

If you’re using a standard Flexi theme…

  1. The width of your content area is 550 pixels in all standard Flexi themes that are using the “medium” layout option.

If you’re using a custom theme…

Chrome

  1. Using the Chrome browser, right click / control click anywhere inside your content area and select Inspect Element.

    Image showing a contextual menu with "Inspect Element" highlighted

    In Chrome, right-click (or control + click) in the content area and choose “Inspect Element” to open the element inspector.

  2. In the new window that appears in the bottom of your browser, move your mouse within the code until you see the content area highlighted (usually in blue).

    The Element Inspector visible at the bottom of the screen showing the content area in the DOM highlighted in blue.

    Find the content area in the Element Inspector. It’ll be highlighted in blue.

  3. You’ll notice a tooltip near the highlighting. The first number is the width.

    A tooltip showing the dimensions of the selected element.

    The width of the element will be the first number in the yellow tooltip.

Safari

  1. You’ll first need to enable the Developer Toolbar in the browser. To do this:
    1. Open Safari Preferences (Macs click Safari and navigate to Preferences. PCs click File and navigate to Preferences)
    2. Click the Advanced tab (the gear on the far right)
    3. Select the Show Develop menu in menu bar box at the bottom of this pane.
    4. Close the Preferences window
  2. Right click / control click anywhere inside your content area and select Inspect Element.
  3. In the new window that appears in the bottom of your browser, move your mouse within the code until you see the content area highlighted (usually in blue).
  4. You’ll notice a tooltip near the highlighting. The first number is the width.

Firefox

  1. Right click / control click anywhere inside your content area and select Inspect Element.
  2. In the new window that appears in the bottom of your browser, click the button that looks like a mouse cursor going into a square.
  3. With the Select Element tool enabled, move your mouse over your site. You’ll notice dotted lines appearing around elements on your page. Find the content area and click to focus on it.
  4. Back in the bottom window, click Box Model on the right.
  5. The width and height will be shown. The first number is the width.

Microsoft Edge

  1. Press F12 or Ctrl+Shift+I to bring up the Developer Tools. 
  2. Right-click on any image on the web page and click on Inspect.
  3. Make sure the Elements tab is selected.
  4. Select the Properties or Computed tab listed below.
  5. The height and width will be listed for either tab options.