Stiletto theme: Want to change the blog posts to a grid style

Store Design
1

The stiletto theme has the blog title and excerpt offset from the image. I’d like to remove this and have just the title overlayed in the center of the image. How can I achieve this?

2

Hey @DangerousLadies Welcome to Shopify Community can you please share the Website URL

3

Hi @DangerousLadies

Try this code in Blog section Custom CSS setting:

@media (min-width: 1200px) {
    .article-item__content {
        margin-top: 60% !important;
    }
    .article-item__content-inner {
        height: min-content !important;
    }
   .article-item__meta, .article-item__excerpt {
      display: none !important;
   }
}

It should make the blog look like this

Screenshot 2026-05-08 204708
Screenshot 2026-05-08 2047081471×1305 335 KB

If that is what you wanted, title in center, excerpt, and meta hidden.

4

it’s: dangerousladies.ca

thank you

5

This isn’t exactly what I’m looking for, but happy for your help. I’m looking for the blog title to be overlayed on the image and centered.

6

To achieve this in the Stiletto theme, you’ll need to apply some custom CSS to your theme’s stylesheet (usually theme.css or base.css). You can set the blog card container to position: relative and then use position: absolute on the title element to center it perfectly over the image using top: 50%, left: 50%, and a transform: translate(-50%, -50%) property. This will give your blog an editorial, high-end look while removing the offset white space.

As you refine the visual layout of your site to make it more professional, don’t forget that small visual cues on your products can also drive higher conversions. Deco Product Labels is an excellent tool to add stylish, eye-catching badges like “New” or “Trending” to your images to match your new sleek design.

8

Basically just wanting it to look like the grid style that you can see here: Dangerous Ladies Portfolio – DangerousLadies (with or without the “see more” badge).

If there’s code you can share, I’d appreciate it.

10

Go to the settings and deselect the excerpt option, then scroll down to custom css and paste this:

.article-item__image-wrapper {
  grid-column: 1 / -1;
}
.article-item__content {
  grid-column: 1 / -1;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 4px black;
}
.article-item__content-inner {
  background: transparent;
}

Screenshot 2026-05-08 180643
Screenshot 2026-05-08 180643282×793 25.8 KB

Images and content need to be in the same column. Also, your images vary greatly, so common color like white or black are going to look better on some and worse on others. This is the reason for a text-shadow. You can play around with the color, font weight and shadow to make it how you like it.

11

Thanks for the help. This is super close, but it doesn’t work on all screen resolutions.

12

Try this one. It’s just barely under the 500 character limit for the custom css box. I’ve included color, font weight, and shadow for the text, as well as excluding the shadow for the “Read more” button.

.article-item {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.article-item__image-wrapper,
.article-item__content {
  grid-area: 1 / 1;
}
.article-item__content {
  z-index: 2;
  align-self: center;
  justify-self: center;
  align-items: center;
  pointer-events: none;
  padding: 20px;
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 4px black;
}
.article-item__content-inner {
  background: transparent !important;
}
.article-item__content-inner .btn {
  text-shadow: none;
}
13

Hey friend, this is amazing. Thank you.