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: 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: This image looks fine on a desktop/laptop screen, but we only wish to show the area in the red square on mobile devices. Vertical images only look good on a mobile, so we don't wish to show them on a desktop at all, while some horizontal images only look good on the desktop (or mobile devices being held horizontally). To achieve the above two aims, we can make use of "Description is Style" and "Media Query" properties of the Swiper Gallery component. Step 1: Upload your photos Log into your backend and go to Galleries → New Gallery Upload your photos and make sure to save your gallery! For each photo, add custom CSS that will only apply for small devices that are being held in a vertical position. Particularly, use the background-position rule to shift the image left or right. You can also play around with the background-size (set it to contain or cover). Some examples: Step 2: Drop the swiper gallery to your page Drop the component onto your page and check "Description is Style": Also set "Media Query" to @media screen and (max-width: 766px) and (orientation: portrait) - this will ensure that the CSS that you include in your image descriptions is only applied to mobile devices in a portrait orientation. You can also put your swiper inside of a div and set some styles to make sure that the images are displayed full screen, so your final page looks like: {% put styles %} {% endput %}