Dawn Theme: How to make featured collection section scrollable

Store Design
, ,
1

On my website home page, https://www.fleshandbloodcards.com there is a featured collection section. There are 9 items in the collection. I want to display the first 5 items in the collection neatly centred on the screen but be able to scroll right and left on that section from a laptop to see the other items. How would I go about doing this please? I dont want to make the section the full width of the page as it looks ugly when I do this (one item is half on half off the screen to the right of the section).

Thanks for your help folks!

2

Hi @chad0x001

If you want the result like image below, you can try my solution.

MikeOmega_0-1679752139459.png
MikeOmega_0-1679752139459.png1255×527 223 KB

  1. Open Theme → Edit code

  2. Open Assets → base.css and paste this code to bottom of file:

.page-width.section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad-padding.isolate slider-component {
max-width: 100%;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
}

.page-width.section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad-padding.isolate .grid {
    display: flex;
    flex-wrap: nowrap;
}
.page-width.section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad-padding.isolate .grid--3-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
    flex-grow: unset !important;
    flex-shrink: unset !important;
}

Hope my answer will help you

Mike from Omega

3

Mike that’s very cool solution but the wrong section! Please re-consider the section above that.

chad0x001_0-1679752582988.png
chad0x001_0-1679752582988.png1105×595 460 KB

This part ^ Thank you very much indeed for your excellent solution.

4

But I see that this section has only 5 items.

Did you hide others?

5

I made it so the page would only display a maximum of 5 items. I have now displayed all objects and made carousel on desktop. Yous ee how they scroll off the page? So ugly!