Hi, I want the preview images of my blog to be bigger and have rounded corners like here. And also a bit more space between the images.
is that possible?
Thank you.
Goal: make Shopify blog preview images larger, add rounded corners, and increase spacing between posts.
Initial fix: custom CSS was added, but applying it in base.css affected the entire homepage (e.g., category bubbles). The solution was to scope the rules to the blog only using .blog selectors, adjusting padding and adding border-radius to .card__media.
Shape/size update: to make images square (same size as the reference), a CSS variable was set: .blog .card__inner.gradient { --ratio-percent: 100% !important; }.
Further refinement: the user asked to make the square slightly smaller. The helper advised removing a specific code snippet (shared via screenshot), which produced the desired smaller square appearance.
Outcome: user confirmed the final result works. No further issues reported; thread resolved.
Notes: images/screenshots provided were central for visual targets. Technical terms: CSS (styling language), selector scoping (.blog …) ensures changes apply only to blog pages, and --ratio-percent controls image aspect ratio in the theme.
Hi, I want the preview images of my blog to be bigger and have rounded corners like here. And also a bit more space between the images.
is that possible?
Thank you.
.blog .page-width-desktop {
padding: 0 !important;
}
.blog__posts.articles-wrapper .article {
padding: 6px !important;
}
.card .card__inner .card__media {
border-radius: 15px !important;
}
Thank you.
When i use the code in base.css it chaning the whole front page, even my category bubbles have the same form now.
Best regards
Let me check
.blog .page-width-desktop {
padding: 0 !important;
}
.blog .blog__posts.articles-wrapper .article {
padding: 6px !important;
}
.blog .card .card__inner .card__media {
border-radius: 15px !important;
}
Can you try this code again @store095
Do you want to make the image square?
This code will make your image square. If I want the exact size of the image you provide, I need the exact parameters of that image. Or you can state the request to make the image bigger or smaller. I will edit it for you.
Can you try remove this code @store095
Its working. Thank you ![]()