Changing layout

[shopgallery]

I currently forked the project. How can customize layout of gallery page so that it show 3 column in mobile view ? thank.

[nicokaiser]

You need to change the CSS classes in page_album.html. Currently, sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 is used:

• smaller than 640px: one column
• >=640px ("sm"): 2 columns
• >=1024px ("lg"): 3 columns
• >=1280px ("xl"): 4 columns
• >=1792px ("3xl"): 5 columns

So mobile view currently shows 1 column (or 2 on larger mobile devices). To change this, you can use different classes, e.g. sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5.

Remember you have to recompile the CSS by installing Tailwind CSS (npm install) and rebuild the theme (npm build) for this to work.

[shopgallery]

Thank you so much for your answer, it worked for page_albums.html but actually I wanted to show 3 columns in page_gallery.html. So do you know of a way to do it? ?

[shopgallery]

[nicokaiser]

I understand. This is entirely rendered by the flickr-justified-gallery module, so you might want to look there and add options to main.js accordingly. I'm not sure if this can be adjusted to display multiple rows at such small screens, since the row heights are (pretty much) fixed.

[shopgallery]

OK, thank you so much, I'll try. And thank you for your work, it's a great template.