Adapt size of Product category list only for mobile version

Store Design
,

Topic summary

A Shopify store owner using the Dawn theme wants to modify their product category list display specifically for mobile devices. They want to maintain a single-column layout but reduce the size of each category item on mobile, while keeping the desktop version unchanged.

Proposed Solution:
A community member suggested adding custom CSS code to the theme’s stylesheet (base.css, style.css, or theme.css). The solution involves:

  • Using a media query targeting screens up to 749px width
  • Applying flexbox properties to create a column layout
  • Adjusting grid item widths (80% for tablet, 100% max-width for mobile)
  • Centering alignment for the category items

Implementation Steps:

  1. Navigate to Shopify admin → Online Store → Themes
  2. Click Actions → Edit code on the active theme
  3. Open the appropriate CSS file in the Assets folder
  4. Add the provided CSS code at the bottom
  5. Save changes

The discussion remains open pending confirmation from the original poster whether this solution meets their needs.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I added a product category list to my shopify website (Dawn Theme) and want to adapt the size of each category on the mobile version only (keep it as it is on desktop).
I want to have one column for each category but make each one smaller (See pictures).

This is the link to my website: https://rightnowvintage.de/

Bild 11.10.23 um 13.51.jpeg
Bild 11.10.23 um 13.51.jpeg2880Ă—1536 358 KB

Bild 11.10.23 um 13.52.jpeg
Bild 11.10.23 um 13.52.jpeg512Ă—1016 120 KB

Thank you!

1 Like
2

Hi @Regardez

Do you mean like this?

Made4uoRibe_0-1697051059903.png
Made4uoRibe_0-1697051059903.png626Ă—496 348 KB

If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
ul#Slider-template--19338816749903__d0779405-2022-4a0a-a1da-a9cd02b11f6d {
    align-items: center;
}
.grid {
    display: flex;
    flex-direction: column;
}
.grid--2-col-tablet-down .grid__item {
    width: 80%;
}
.grid__item {
    max-width: 100%;
}
}
  • And Save.