Focal Theme: Want Collections Side By Side Instead Of Stacking Them On Main Page On Mobile?

[admarketing]

Hi everyone!

I am trying to make it so that we can use “featured collections” on our main page. I would like 2x2 or 2x6 next to each other instead of stacking. Also - I’d like to have my collection title under the image not in the middle? I’m using the focal theme.

url - polkadottedarrow.com

pw: Anthony25

Pic for example of what I’m looking for.

@KetanKumar

[PageFly-Victor]

Hi @admarketing ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media (max-width:767px){
.list-collections__item-list {
    grid-template-columns: repeat(2, 1fr);
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

[admarketing]

Thank so much! That worked.

Any idea on how I can make the heading/subheading for the collections under the cover image?

[PageFly-Victor]

@admarketing , You can add this code below to theme.css

@media (max-width:767px){
  .list-collections__item-info  {
        position: inherit !important;
        transform: unset !important;
        background: white !important;    
    }
    .list-collections__item-info > p{
        color: black !important;
    }
}

I changed the font color to black so that it can be seen on a white background

[admarketing]

It looks like it didn’t work properly. It now has a gray box where the text should be?

[PageFly-Victor]

@admarketing , You can try another way below:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

[admarketing]

Perfect!

[kk30]

I’m trying to do the same on Galleria, any suggestions?