Hi Support Team,
I have a huge problem with my store,
why are my collection list images so small?
Like these are my:
(yes I know, i need to edit a lot)
Can I have them like:
Store URL: https://www.faithandyou.in
Theme: Refresh
A store owner is experiencing issues with collection list images appearing too small on their homepage. They shared screenshots demonstrating the problem and requested a solution to make the images larger.
Solution Provided:
A PageFly support representative offered custom CSS code to be added to the theme’s base.css file. The initial code successfully increased image size by setting width to 100% and removing padding.
Follow-up Issue:
After implementation, the user discovered the code affected other sections (featured collections), causing unintended layout problems. They requested the CSS be modified to target only the collection list section.
Refined Solution:
The support representative provided updated CSS code using .collection-list-wrapper selectors to isolate the changes to only the collection list, preventing impact on other page sections.
Additional Tip:
The user can adjust image size by changing the width percentage value (e.g., 150% for larger images).
Status: The discussion appears resolved with the targeted CSS solution, though final confirmation of success is not explicitly stated.
Hi Support Team,
I have a huge problem with my store,
why are my collection list images so small?
Like these are my:
(yes I know, i need to edit a lot)
Can I have them like:
Store URL: https://www.faithandyou.in
Theme: Refresh
Hi @AryavK
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.card__media {
margin: 0px !important;
width: 100% !important;
}
.collection-list-wrapper.page-width.isolate.page-width-desktop.section-template–15148222120024__ec21b272-d7a3-4f6d-b313-2d28ab0acd84-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
it worked and got bigger
thanks g
you do not know how much this means to me
if you want to make it bigger, instead of 100%, you can make it 150%
thanks @PageFly-Henry
Yes, you can change it to 150%, Glad it worked for you @AryavK ![]()
I have one last question,
It is big, but not as big as i wanted,
and when, i paste the code,
my featured collection gets ruined into this:
or
can you pls update the code so it only effects the collection list and not any other section.
Thank you
You can try again with this code:
.collection-list-wrapper .card__media {
margin: 0px !important;
width: 100% !important;
}
.collection-list-wrapper .collection-list-wrapper.page-width.isolate.page-width-desktop.section-template–15148222120024__ec21b272-d7a3-4f6d-b313-2d28ab0acd84-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}