How can I reduce the size of my blog post's featured image in Dawn?

Store Design
, , ,

Topic summary

A user seeks to reduce the oversized featured image on their Dawn theme blog posts.

Two CSS solutions proposed:

  1. Modify section-blog-post.css (line 11): Change .article-template__hero-container max-width from 130rem to 72.6rem with centered margins.

  2. Add to base.css: Insert .article-template__hero-container rule with max-width: 72.6rem !important at the file’s bottom.

Both approaches target the same CSS class to constrain the hero image container width. The second solution uses !important to ensure the style override takes precedence. Screenshots demonstrate the implementation steps and expected visual results with a more compact featured image display.

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

Hi all,

I need y’all help with the featured image in blog post. Right now it’s way too big >< I want to make it smaller.

rielrielx_0-1695954039521.png
rielrielx_0-1695954039521.png1178×862 218 KB

Here is the link to my blog post. Thank you!!

2

Hi @rielrielx

Please go to your Online store > Themes > Edit code > Assets > section-blog-post.css, go to line 11, find this code

.article-template__hero-container {
  max-width: 130rem;
  margin: 0 auto;
}

Change to this

.article-template__hero-container {
  max-width: 72.6rem;
  margin: 0 auto;
}

Screenshot 2023-09-29 at 10.05.27.png
Screenshot 2023-09-29 at 10.05.27.png991×746 407 KB

1 Like
3

Hello @rielrielx :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.article-template__hero-container {
    max-width: 72.6rem !important;
}

The result

Screenshot 2023-09-29 at 11.30.34.png
Screenshot 2023-09-29 at 11.30.34.png1051×672 438 KB

Hope it helps!

1 Like