How do i get my collection list pictures smaller? I want them smaller like the picture I pasted.
I also want the text to be centered and spaces like that.. (I want it to look as alike as possible)
Topic summary
A user seeks to modify their Dawn theme collection list by:
- Reducing image sizes to match a reference design
- Centering text beneath collection items
- Adjusting spacing between elements
A solution was provided involving custom CSS code added to the base.css file. The code:
- Adjusts grid column widths to 20%
- Centers card wrappers at 50% width
- Centers heading text using flexbox
- Applies only on desktop screens (min-width: 990px)
The original poster confirmed the solution worked successfully.
Follow-up question: How to remove arrows appearing after the text?
Another participant requested the store URL and password (if applicable) to provide further assistance with the arrow removal.
Hi @Byggstan
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media screen and (min-width: 990px) {
.grid--4-col-desktop .grid__item {
width: 20% !important;
display: flex !important;
justify-content: center !important;
}
.card-wrapper.animate-arrow.collection-card-wrapper {
width: 50% !important;
}
h3.card__heading {
display: flex !important;
justify-content: center !important;
}
}
Result:
Best,
Liz
1 Like
You’re amazing. Thanks!
Is there any way to get rid of those arrows after the text aswell?
Hi @Byggstan kindly provide your store URL please and if it is password protected, please share the password as well. Thanks