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 ($47/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

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: