Recipes

Gallery concoctions to make your visitors go aaaah

Responsive Full-Screen Gallery with Image Focal Point

The aim is to have a full-screen gallery that works both on desktop as well as mobile devices. The main issue is that mobile devices are often held in a portrait orientation, while desktop devices are landscape. 

See the live demo of this recipe in action!

A quick brainstorm reveals that:

  1. Some landscape images work both on desktop and mobile, however, on mobile we wish to shift them to either side because the image focal point is not in the center. Here is an example: