This members-only tutorial provides the steps to replace the default Flexbox layout for image galleries in Oxygen with a custom responsive CSS Grid layout that shows a wide feature image at the top with the rest in columns.
We shall set up the grid to show 5 columns on large viewports (typically tablets in landscape and desktops), 4 columns from 991px and below, 3 columns from 767px and below and finally, a single column from 479px and below.
Assign a class of
gallery-grid-wide-top to your galleries for which you wish to have the wide image layout.
Add the following in an existing or new Stylesheet at Manage > Stylesheets:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.