Increase Collection List Size On Mobile Roughly Double

Store Design
, ,
1

I need help increasing the collection list card by double or around there only on mobile please help thanks

store: pokeclover.com

no password
theme: Dawn

image
image379Ă—321 71.4 KB

2

@Henry2 You mean you want to add more collection cards or increase the size of each card?

3

Increase the size fo each card on only mobile as desptop looks fine but mobile looks small

4

Hi @Henry2 is this what you are expecting?

image
image713Ă—392 90.3 KB

@medi aonly screen and (max-width: 749px) {
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item {
    min-width: 65%;
}
}

Thanks

5

yea that worked thank very much but theres another issue when i scroll on mobile the collection list wobbles up and down

6

@Henry2 Please accpet the solution if it worked, so other looking for similar issue it will be easier for them to find…

I will look into the wobbling issue…

7

Hey @Henry2,
Thanks for sharing your feedback that you facing regarding the wobble issue.
I take a look on the home page with the same section.
But I am sorry I don’t find the same issue. This maybe that you must fix it or somehow this issue doesn’t exist.
For more clarification could you please share a video in which you explain the issue or share a screenshot.
Thanks

8

Hi,

Hope this will help

  • Add CSS either in Theme settings → Custom CSS (fast) or paste into Assets/component-card.css

CSS example

/* ---------- Make collection-list cards larger on mobile (Dawn theme) ---------- */
/* Mobile breakpoint: adjust max-width if your theme uses a different breakpoint */
@media screen and (max-width: 749px) {

  /* 1) Force one card per row (double the width vs 2-per-row) */
  ul.collection-list.grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important; /* spacing between rows */
  }

  /* 2) Make card images taller (increase vertical space)
     --ratio-percent controls the image box height in Dawn (higher -> taller)
     150% is a good starting point (roughly 1.5x); set to 200% for ~2x height. */
  .collection-list__item .card__inner.ratio {
    --ratio-percent: 150% !important;
  }

  /* 3) Make sure image covers area nicely */
  .collection-list__item .card__media .media img,
  .collection-list__item .card__media .media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 4) Optional: slightly larger title & spacing so layout feels balanced */
  .collection-list__item .card__heading {
    font-size: 1.05rem !important;
    margin-top: 0.4rem !important;
  }
  .collection-list__item .card__content {
    padding: 0.5rem 0.4rem !important;
  }
}
/* --------------------------------------------------------------------------- */
  • Key changes: make the collection grid 1 column on mobile and increase --ratio-percent to make cards taller. Adjust --ratio-percent from 150% → 200% if you want a stronger “double” effect.
9

Hi @Henry2 , have you solved your problem yet?

10

sorry the code increases my featured collection products as well can you help?