{"id":68397,"date":"2013-07-02T13:02:52","date_gmt":"2013-07-02T17:02:52","guid":{"rendered":"http:\/\/www.bu.edu\/tech\/?page_id=68397"},"modified":"2023-03-08T16:42:53","modified_gmt":"2023-03-08T21:42:53","slug":"find-area-width","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/www\/wordpress\/how-to\/find-area-width\/","title":{"rendered":"Find the dimensions of a web page element"},"content":{"rendered":"

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:<\/p>\n

If you’re using a standard Flexi theme…<\/h2>\n
    \n
  1. The width of your content area is\u00a0550 pixels<\/b> in all standard Flexi themes that are using the “medium” layout option.<\/li>\n<\/ol>\n

    If you’re using a custom theme…<\/h2>\n

    Chrome<\/h3>\n
      \n
    1. Using the\u00a0Chrome<\/b> browser, right click \/ control click anywhere inside your content area and select\u00a0Inspect Element<\/b>.\n

      \"Image

      In Chrome, right-click (or control + click) in the content area and choose “Inspect Element” to open the element inspector.<\/p><\/div><\/li>\n

    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).\n

      \"The

      Find the content area in the Element Inspector. It’ll be highlighted in blue.<\/p><\/div><\/li>\n

    3. You’ll notice a tooltip near the highlighting. The first number<\/strong> is the width.\n

      \"A

      The width of the element will be the first number in the yellow tooltip.<\/p><\/div><\/li>\n<\/ol>\n

      Safari<\/h3>\n
        \n
      1. You’ll first need to enable the Developer Toolbar in the browser. To do this:\n
          \n
        1. Open Safari Preferences<\/strong> (Macs click Safari and navigate to Preferences.<\/strong> PCs click File<\/strong> and navigate to Preferences<\/strong>)<\/li>\n
        2. Click the Advanced<\/strong> tab (the gear on the far right)<\/li>\n
        3. Select the Show Develop menu in menu bar<\/strong> box at the bottom of this pane.<\/li>\n
        4. Close the Preferences<\/strong> window<\/li>\n<\/ol>\n<\/li>\n
        5. Right click \/ control click anywhere inside your content area and select\u00a0Inspect Element<\/b>.<\/li>\n
        6. 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).<\/li>\n
        7. You’ll notice a tooltip near the highlighting. The first number is the width.<\/li>\n<\/ol>\n

          Firefox<\/h3>\n
            \n
          1. Right click \/ control click anywhere inside your content area and select\u00a0Inspect Element<\/b>.<\/li>\n
          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.<\/li>\n
          3. With the Select Element<\/strong> 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.<\/li>\n
          4. Back in the bottom window, click Box Model<\/strong> on the right.<\/li>\n
          5. The width and height will be shown. The first number is the width.<\/li>\n<\/ol>\n

            Microsoft Edge<\/h3>\n
              \n
            1. Press F12<\/strong> or Ctrl+Shift+I <\/strong>to bring up the Developer Tools.\u00a0<\/strong><\/li>\n
            2. Right-click on any image on the web page and click on\u00a0<\/span>Inspect.<\/em><\/li>\n
            3. Make sure the\u00a0<\/span>Elements<\/em>\u00a0<\/span>tab is selected.<\/li>\n
            4. Select the Properties or Computed tab listed below.<\/li>\n
            5. The height and width will be listed for either tab options.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

              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…<\/p>\n","protected":false},"author":6044,"featured_media":0,"parent":304,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/68397"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/6044"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=68397"}],"version-history":[{"count":7,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/68397\/revisions"}],"predecessor-version":[{"id":143992,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/68397\/revisions\/143992"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/304"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=68397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}