Increased the columns in Collection List but want to decrease for one section on mobile - Dawn Theme

Store Design
, , ,

Topic summary

Goal: adjust Shopify Dawn’s Collection List so the second instance shows 4 columns on mobile (while others remain at 6); centering was a backup option.

Approach: use CSS media queries to change the grid layout on small screens. Key idea is setting grid-template-columns to four columns within the specific section only.

Implementation options:

  • Add Custom CSS in the second Collection List section with a media query (≈ max-width 750–767px) and set .collection-list to auto auto auto auto, scoped to that section.
  • Insert CSS in theme.liquid (before ) targeting the section’s unique ID (e.g., #shopify-section-template–… or ul#Slider-template–…) to limit changes to the second instance. An optional font-size tweak for card headings was also suggested.

Outcome: the solution worked and was confirmed by the requester. Images illustrate the before/after and are central to understanding the visual result.

Status: resolved; no remaining questions or disagreements.

Summarized with AI on December 17. AI used: gpt-5.
1

I’m happy with the collection list on my homepage showing 6 columns for the first and third instance, but the second instance I’d like to show only 4 columns. Is this possible? If not, could I center the section?

www.lushpupco.com

Happy with this section (working on the font size)

lushpupco_0-1727939867557.png
lushpupco_0-1727939867557.png386×323 39.5 KB

Would like this section to be larger or centered

lushpupco_1-1727939909560.png
lushpupco_1-1727939909560.png428×325 13.1 KB

1 Like
2

Hi @lushpupco ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1727940449655.png
BSSCommerceHDL_0-1727940449655.png1887×478 36.2 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Please add this code in Custom CSS of that section to make it show 4 in the second section

@media (max-width: 750px) {
    .collection-list {
        grid-template-columns: auto auto auto auto !important;
    }
}
4

Hello @lushpupco

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ #shopify-section-template--22975037571349__collection_list_GUWbtw h3.card__heading a { font-size: 9px !important; } .slider-mobile-gutter .collection-list { grid-template-columns: auto auto auto auto !important; } }

Tech_Coding_0-1727941144656.png
Tech_Coding_0-1727941144656.png313×357 15.3 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

5

Thank you, this is perfect!

1 Like
6

@lushpupco , No problem. Glad to help you :heart_eyes:

7

Hello @lushpupco
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-collection-list.css
add this code at the end of the file.

ul#Slider-template--22975037571359__collection_list_j6Wkr8 {
grid-template-columns: auto auto auto auto !important;
}

result

16.png
16.png492×832 43.6 KB

If this was helpful, hit the like button and accept the solution.
Thanks