Screen Sizes

1 How to use our extension

Screen Sizes



Welcome to Screen Sizes

Thank you for installing and using our extension

Features:

✔️ Simple and Fast Grid View for Websites

How do you measure distance between elements on a web page?

The most precise way is with a ruler. You can also use the "View" menu, which has a grid option that lets you see measurement lines on your browser window.

But if you want to be really precise about it, there are also some online tools that will let you measure distances between elements:

Zoom to Fit: https://zoomtofit.com/

Dimensions: http://dimensions.io/

There are a number of ways you can use the ruler.

You can use it to measure an element on the web page. To do this, simply click on the ruler and drag it to the element you want to measure. You will see its width in pixels displayed in the top left corner of the screen. If you want to measure other elements, just drag the ruler again until it is over another element on the page.

You can also use it to measure text on a web page. Just click on the ruler and drag it over some text then release your mouse button. The text will be highlighted in yellow and its font size will be displayed at the top left of your screen.

You can also find out how wide or tall a particular element is by using Inspect Element (F12). This tool lets you look at all of an element's properties, including its width and height (amongst others).

Tutorial:

  1. Install the Extension
  2. After installing the extension, click on the icon on the toolbar.

Show grid lines directly on a website and measure the exact pixel distance between elements.

Are you a web designer? Need to arrange the landing page to look perfect? Here is how you can use this extension grid view to align your images/text together perfectly.

After you activate the extension, grid lines will be overlaid on the current webpage you have open. You will be able to calculate the exact distance between images/text and see how you can modify the webpage to look better.