Collection list size in mobile - IMPACT THEME

Store Design

Topic summary

Mobile collection list tiles in the Impact theme are too large; requester wants smaller images and text on phones, showing 2–3 items per row.

Actions and outcome:

  • Helper provided custom CSS to add under the in theme.liquid. Initial placement was wrong, then corrected, and font-size reduction was added. Changes became visible and were confirmed to work.
  • Exact code details are not shown in the transcript; screenshots were referenced.

Theme setting interaction:

  • Works when the “Stack collections” option is enabled (a layout setting that stacks collection cards vertically). The requester asked to have the same sizing when “Stack collections” is unchecked (grid layout).
  • Helper cautioned that applying a fix for the non-stacked layout would conflict with the existing code, potentially breaking both; no workaround was provided.

New question:

  • Another participant asked how to move the collection title from centered overlay to below the image, left-aligned. No responses yet.

Status:

  • Primary issue resolved for stacked layout on mobile. Behavior for non-stacked layout remains unresolved. New styling question is open.
Summarized with AI on December 27. AI used: gpt-5.
1

Link: Popular Brands (serenityskinstore.com)

Trying to make the collection list size smaller in mobile, have tried adding several different css code lines into theme.css and the liquid file that i found on this community forum but none have worked.

I want the images to be smaller on mobile only and also the text to match the smaller size on mobile. atleast 2 or 3 images in one row. Please let me know

2

Hey @Serenity3 ,

You should try this and see if it helps :blush:

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706899570347.jpeg
ThePrimeWeb_0-1706899570347.jpeg1253Ă—933 87.9 KB

3

Screenshot 2024-02-02 235018.png
Screenshot 2024-02-02 235018.png1890Ă—727 64.8 KB

Hey, ive updated the code here but there is no change for mobile view

4

Hey @Serenity3 ,

Can you check again? I can see the changes on my phone now

5

Oh, sorry. I applied it in the wrong section. I applied it here. If you don’t want this, you can remove the code. I will send you the one for the collection list in a while

ThePrimeWeb_0-1706900094359.png
ThePrimeWeb_0-1706900094359.png431Ă—846 87.1 KB

6

Serenity3_0-1706900128347.png
Serenity3_0-1706900128347.png603Ă—907 40.4 KB

Still looks like this for me. Could you share a screenshot?

7

Copy this instead @Serenity3 , You can keep the old code if you like the design for the product collections
1 Like
8

Hey @Serenity3 ,

Sorry, I updated the code above to reduce the font-size as well

9

Serenity3_0-1706900887020.png
Serenity3_0-1706900887020.png1475Ă—699 70 KB

Thanks so much, it works! Just one thing, is it possible to still have these apply if the collection is not checked as “stack collections” if i have it unchecked it looks like this, but the other way around its fine. Let me know if there is a workaround, otherwise no worries

10

@Serenity3 ,

I think if you apply the code to fix the stack, then it would clash with the other one and then none of the codes would work.

1 Like
11

i wanna move the heading. i don’t want it at the center of the collection image but just below centered on the left. how to do it?