-
Notifications
You must be signed in to change notification settings - Fork 1
Home
Blake Bertuccelli edited this page Sep 7, 2017
·
8 revisions
This theme is retina-ready and all our images responsively resize to different displays.
Reccomended image size: 2500px x 1600px or larger.
Base Sizes:
- Base Image Height = 60%
- Base Portrait Height = 45%
-
Base Landscape Width
= 100%;
Single Landscape:
- Width =
Base Landscape Width
Portrait and Landscape (w/ 1% margin):
- Landscape Width = 68.2771855%
- Portrait Width = 30.7228145%
- Landscape and Portrait Height = 41.095890411%
Mosaic (w/ 1% margin between items):
- Square Width = 37.3887267%
- Landscape Width = 61.6112733%
- Item Height: 37.26708%
Three Column Grid (w/ 1% margin between landscapes):
- Landscape Bottom Margin: 1%
- Landscape Width = 32.66666667%
- Landscape Height = 20%
Two Column Grid (w/ 1% margin between landscapes):
- Landscape Bottom Margin: 1%
- Landscape Width = 49.5%
- Landscape Height = 30%
Whenever we’re trying to find the height of multiple items within a row, we use our Golden Image Sizing Ratio (created by @ebertucc):
(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%.