Shopify themes, liquid, logos, and UX
Hi I'm using minimal theme.
In my first collection I have five categories and I like the sizing of the category thumbnails.
In my second collection I have two categories and the category thumbnails are way too large. Is there a way to make these thumbnails the same size as Category 1?
Thanks!
Solved! Go to the solution
This is an accepted solution.
Here's the best easy solution I can find.
Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.scss.liquid' -->
At the bottom of the file copy and paste this code and your collection list images should be the size you want:
/* Collection List Image Size Change */
/* Desktop Size */
.one-half {
width: 20% !important;
}
.one-quarter {
width: 20% !important;
}
/* Smaller Screen Sizes */
@media only screen and (min-width: 481px) and (max-width: 768px) {
.one-half {
width: 33.333% !important;
}
.one-quarter {
width: 33.333% !important;
}
}
@media only screen and (max-width: 480px) {
.one-half {
width: 50% !important;
}
.one-quarter {
width: 50% !important;
}
}
Let me know if this works for you!
NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.
Hi CL1981,
Welcome to the Shopify Forums.
Would it be possible for you to link your Store URL so I can take a look at the issue?
Thanks
This is an accepted solution.
Here's the best easy solution I can find.
Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.scss.liquid' -->
At the bottom of the file copy and paste this code and your collection list images should be the size you want:
/* Collection List Image Size Change */
/* Desktop Size */
.one-half {
width: 20% !important;
}
.one-quarter {
width: 20% !important;
}
/* Smaller Screen Sizes */
@media only screen and (min-width: 481px) and (max-width: 768px) {
.one-half {
width: 33.333% !important;
}
.one-quarter {
width: 33.333% !important;
}
}
@media only screen and (max-width: 480px) {
.one-half {
width: 50% !important;
}
.one-quarter {
width: 50% !important;
}
}
Let me know if this works for you!
NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024