How can i change the size of the blog images?

Topic summary

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.

Summarized with AI on December 21. AI used: gpt-5.

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.

1 Like
  • Here is the solution for you @store095
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.blog .page-width-desktop {
    padding: 0 !important;
}
.blog__posts.articles-wrapper .article {
    padding: 6px !important;
}
.card .card__inner .card__media {
    border-radius: 15px !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

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

1 Like

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

1 Like

Thank you.

Is it possible to make the image the same size as the bottom?:

1 Like

Do you want to make the image square?

1 Like

Yes and same size as this:

Best regards

1 Like
.blog .card__inner.gradient {
    --ratio-percent: 100% !important;
}

Can you add more code @store095

1 Like

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.

1 Like

Thank you.

Is it possible to make the square a little smaller like here?:

Thank you.

1 Like

Can you try remove this code @store095

1 Like

Its working. Thank you :slightly_smiling_face: