How do i make the featured blog post images square and take away so their is not so much of the text

Store Design

Topic summary

A user seeks to modify their blog post featured images to be square and reduce the amount of visible preview text, showing only one sentence followed by “(…)” with a “read more” prompt.

Solution Provided:

A community member shares CSS code to achieve this customization:

  • Navigate to Online Store > Themes in the admin panel
  • Open the theme’s main CSS file (main.css, base.css, style.css, or theme.css) under the Asset folder
  • Add the provided CSS snippet at the bottom of the file

The code adjusts:

  • Grid item width to 20%
  • Card height to 30vh
  • Content justification for blog post layout

The solution includes a screenshot demonstrating the current blog post layout. The helper requests the original poster mark the response as a solution if it resolves the issue.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

How do i make the featured blog post images square and take away so their is not so much of the text visable so maybe just one sentence then have (…) and you click on it ro read more? Thank you in advance :blush:

1 Like
2

Hi @sidenkompaniet

Do you mean this one?

Made4uoRibe_0-1726245310062.png
Made4uoRibe_0-1726245310062.png1887×669 212 KB

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (min-width: 740px) {
   .blog__posts.articles-wrapper .article.grid__item {
        width: 20%;
        max-width: 20%;
    }

    .blog__posts.articles-wrapper {
        justify-content: center;
    }

    .card__inner, .card__media {
        height: 30vh;
    }
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!