Frequently asked questions

This is a Utility to use different aspect ratios for images. I use it a lot for grids, specially when working with CMS.
It is a mix from Pablo Stanley aspect-ratio-boxes Cloneable and Edgar Allan Knockout Cloneable.
I took that pic at sunrise at Lakdayan Beach, island of Busuanga, Philippines.

Aspect ratio 1:1

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 4:3

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 3:2

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 8:5

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 16:9

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 21:9

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio images

Aspect ratio 1:1

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 4:3

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 3:2

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 8:5

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 16:9

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Aspect ratio 21:9

Lakdaian Beach, Busuanga, Philippine islands. Photo by @fernandocomet

Other Utility Classes

You could use other utility classes if needed. Remember that we try to avoid the use of Combo Classes, but there are certain scenarios where you will have to use them. For example if you  have a modal window and use "hide".

Other utility classes that you could use:

For visibility:
hide
hide-tablet
hide-landscape
hide-portrait
show
show-tablet
show-landscape
show-portrait
opacity-0

For Display:
z-index-XXX
overflow-hidden
overflow-scroll
overflow-auto
inline
inline-tablet
inline-mobile
(same for other Display positions)
...