Find the Width of Part of a Web Page


One of our students wanted to upload full-size photos into a post on his WordPress site. The theme was Canvas from WooThemes.

So, the question became … what is the smallest photo size that I can upload while still having full-size photos in a post?

Our answer was … let’s find out. We can do that by measuring the width of the posts in Canvas.

Here’s the Canvas theme as seen at


To measure the width of posts, we’re going to use the Web Developer addon from Firefox.

First, make sure that you have the Firefox browser installed from

Then go and install the Web Developer addon from


When it’s installed, you’ll see an extra bar across the top of your browser. To measure the width of any part of a page, click Miscellaneous and then Display Ruler.


A grid will then appear on the page. You can drag that grid across the page to measure the area you are interested in. In this case, were measuring the teaser area for the blog.


The end result? The teaser are is about 600px wide and 200px high:

So the best choice for uploading full-size photos will be 600px wide. Any smaller and the photos won’t take up the full width of the post. Any larger and the site will load more slowly because the photos are larger than they need to be.


  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x