Shopify themes, liquid, logos, and UX
Hi,
I have a problem can't figure out how to reduce the collection list image sizes and make them round. I need to do that on PC and Mobile versions.
Shop link - https://e8614c-2.myshopify.com/collections/all
Thanks for the help!
Solved! Go to the solution
This is an accepted solution.
Hi @GediminasS
TRy this one.
.collection-card.carousel__slide {
border-radius: 100%;
}
.collection-card--image.media-aspect-adapt {
border-radius: 100%;
border: .5px solid grey;
}
.collection-card--image.media-aspect-adapt {
padding-bottom: 50%;
width: 50%;
margin: auto;
}
@media only screen and (max-width: 749px){
.collection-grid.enable-swipe.text-center.theme-scroll--inner {
--mobile-columns: 3;
}
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
This is an accepted solution.
Hi @GediminasS
TRy this one.
.collection-card.carousel__slide {
border-radius: 100%;
}
.collection-card--image.media-aspect-adapt {
border-radius: 100%;
border: .5px solid grey;
}
.collection-card--image.media-aspect-adapt {
padding-bottom: 50%;
width: 50%;
margin: auto;
}
@media only screen and (max-width: 749px){
.collection-grid.enable-swipe.text-center.theme-scroll--inner {
--mobile-columns: 3;
}
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hi, is it possible that I don't have any of those files ("base.css, style.css or theme.css") in my asset folder? As I can't find it.
Actually, I have the fail list-collections.css, and it worked like a charm! Thanks!!!
Good to hear! You can also add this in the custom.css file, which you can find in the theme editor.
Hello, @GediminasS
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom
.collection-card.carousel__slide {
border-radius: 100% !important;
}
.collection-card--image.media-aspect-adapt {
border-radius: 100% !important;
border: .5px solid grey;
}
.collection-card--image.media-aspect-adapt {
padding-bottom: 50% !important;
width: 50%;
margin: auto !important;
}
@media only screen and (max-width: 749px){
.collection-grid.enable-swipe.text-center.theme-scroll--inner {
--mobile-columns: 3;
}
}
Thanks!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025