Skip to content

Home

Jump to bottom
Blake Bertuccelli edited this page Sep 7, 2017 · 8 revisions

#Image Specifications

This theme is retina-ready and all our images responsively resize to different displays.

Reccomended image size: 2500px x 1600px or larger.

Standard Image Sizes

Base Sizes:

  • Landscape Width = 100%
  • Portrait Width = 45%
  • Image Height = 60%

Portrait and Landscape Sizes:

  • Margin = 1%
  • Landscape and Portrait Height = 41.095890411%

Sizes of Item in Three Column Grid

  • Right Margin (first two items): 1.5%
  • Width = 32.33333333333%

Item in Two Column Grid##

  • Right Margin (first Item): 2%
  • Width = 49%

Defining Height of a Row of Images

Whenever we’re trying to find the height of multiple items within a row, we use our Golden Image Sizing Ratio (@ebertucc created the ratio):

(100 / Total Length of All Items ) * Base Image Height = New Height

Example:

We have three elements that each have a width of 100%. Our base height is 60%. We finding the new height of all images within a row like this: (100/300)*60. Our new height is 20%.

Clone this wiki locally