Skip to main content

Identify section aspect ratio with the browser inspector

Use your browser's web inspector to find the rendered aspect ratio of a section. Useful for custom CSS and responsive work.

Written by Troy Villasanta

Some sections allow images and videos to be used as backgrounds within the site editing interface. Dimensions like width and height or the aspect ratio of the asset must have the same dimensions as, at a bare minimum, or be proportionate to, the sections. This will ensure the background renders in high quality, and the preferred areas of the asset will be captured properly within the section.

Most browsers have web inspection tools that can give you statistics, like actual dimensions, related to the different elements in your site!

Identify the section aspect ratio using web inspection tools:

  1. Load the preview or published view of the site.

  2. Right-click anywhere on the site and select Inspect.

  3. Click the element selector tool on the upper left corner of the tool/console when it pops up.

  4. Hover over the edges of the section to select the section wrapper.

  5. Find the aspect ratio when the statistics related to the section or section wrapper pop up.

Frustrations happen when there are mismatches between the dimensions of the section and the asset being used. Identifying section dimensions is paramount to finding the best fit to set assets as a background.

While some sections in your subpage allow the height to be set, other section dimensions would inherit or be affected by the size of the browser window and display monitor used to load your subpage. Site builders must find a way to quickly measure the section dimensions.
​

Did this answer your question?