Brookyln Theme Editor: How to have a different featured collection selection for desktop and mobile

[Spr123]

Hi all,

I am using the brooklyn theme.

In the theme editor, one of the sections you can add is the "Featured Collection" section, which allows you to show a few products on your homepage.

My products show in rows of two on mobile, and in rows of three on desktop, for this reason, for example if I have 8 products in the featured collection, it will look great on mobile, but there will be a blank space on the desktop featured collection (8/9).

Is there a way to create a distinct featured collection section for me to select from the theme editor for my mobile homepage, and a separate one for desktop? What code tweaks would I need to do for that? (I've seen similar request regarding different slideshow sections (mobile v.s desktop) thus I assume the same can be done here.

To recap I would like to avoid having "blank space on either mobile or desktop homepages. I do not think it's necessary for me to send my website link as it's a generic request, but if it's really needed just feel free to ask.

I think and hope this can be a quick fix? 

desktop (3X2 grid for 8 items) one blank spacemobile (2X4 grid for 8 items) looks great

Many thanks for the support!

[DanBim]

Hi @Spr123, you can change that section to appear 4 products per row by opening featured-products.liquid file in Sections folder of your theme then replace this element large--one-third in line 50 by this one large--one-quarter, click Save button.

[Spr123]

Hi @DanBim thank you for the quick reply, very much appreciated.

I did as you suggested, unfortunately it did not make any difference. Perhaps it's due to the fact that we are using specific product cards to show our products.

Perhaps if we are able to increase page width that can be used, four product cards may fit per each row. 

Please find a preview url of my homepage: https://rcm9mssv5knd2djc-55506731197.shopifypreview.com/

Please let me know if you have any ideas that could solve this issue. I'll be sure to set this question as resolved in case.

Please let me know if you may need anything else.

Many thanks!

[DanBim · Accepted solution]

Hi @Spr123, as I'm checking, this CSS code is causing the issue that products cannot appear 4 products in a row

[Spr123]

@DanBim OK I managed to figure it out myself, playing with the width percentage I had set in the CSS, thanks to your suggestion.