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.

Before:

After:

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.

Step 1

Assign a class of gallery-grid-wide-top to your galleries for which you wish to have the wide image layout.

Step 2

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 ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: