How can I optimize the layout of my Debut theme collection list?

Store Design
1

I’ve searched the forums and could not find any direct answer to this. For the featured collection list on the debut theme, I currently only have 3 collections to display which results in 2 boxes on row 1 and 1 box left aligned on row 2 for mobile view.

BA3A5127-F466-40CD-9623-DAAB2B698B92.png
BA3A5127-F466-40CD-9623-DAAB2B698B92.png1284×2778 280 KB

Is there a way to either center the lone box on the last row or expand the 1st or last one to take up the whole space?

The demo url is https://opi9izeod0i0i8rb-56967463070.shopifypreview.com

2

@kdcoogler - please add this css and check , should look like screenshot below

@media only screen and (max-width: 749px){

#shopify-section-16285217082f85fd04 .collection-grid .grid{
display: flex;    flex-wrap: wrap;    align-items: center;    justify-content: center;
}

#shopify-section-16285217082f85fd04 .collection-grid .grid .grid__item {flex-basis: 50%;}
}

suyash1_0-1628604323771.png
suyash1_0-1628604323771.png1366×768 200 KB

1 Like
3

@kdcoogler

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
#shopify-section-16285217082f85fd04 .collection-grid .grid{display: flex;    flex-wrap: wrap;    align-items: center;   justify-content: center;
}
#shopify-section-16285217082f85fd04 .collection-grid .grid .grid__item {flex-basis: 50%;}
}

Thanks!

1 Like