How can I reduce the size display of featured image on blog?

Technical Q&A

Topic summary

A user running the Debut theme needed to reduce oversized featured images on their blog page, which were taking up half the screen on desktop. They wanted eventual grid layout support for multiple posts.

Solution for Debut Theme:

  • Add custom CSS to theme.css file targeting the blog template container
  • Set max-width: 600px (adjustable) with centered positioning
  • This fix was confirmed working by the original poster

Dawn Theme 2.0 Complications:

  • Multiple users reported the same issue with Dawn theme but couldn’t find theme.css
  • A workaround emerged: modify section-blog-post.css by reducing the max-width value in .article-template__hero-container from 130rem to a smaller number (e.g., 66rem)
  • This solution only affects individual blog post pages, not the main blog listing page

Key Limitation:
Each Shopify theme has different file structures and CSS selectors, requiring theme-specific solutions. The helper noted that custom code would be needed for each unique website/theme combination.

Status: Resolved for Debut theme; partial workaround available for Dawn 2.0. Questions remain about Studio theme and main blog listing pages.

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

Hi there,

I’ve just posted my first blog post and on the blog page the featured image is huge, taking up half the page on desktop. I’m using the Debut theme and I’d like to know how can I reduce the display of this image? I’ve looked into the liquid for this page and I believe I know where the code is but don’t know exactly where to edit and what to edit with. Eventually once I have more than one post in my blog, I’d like them to display in a grid format (2 or 3 columns), so I’d like the featured images to display at half the current size.

Many thanks!

1 Like
2

Hi @Lia91 ,

I checked on the Debut theme default is still working well.

You can take a look at this link here: https://themes.shopify.com/themes/debut/styles/light/preview

Please share your store URL and take a screenshot of the error, so I will check and provide a solution here.

Greetings!

1 Like
3

Hi, the url is https://www.hellohappyskin.com.au/blogs/happystuff

Thanks!

4

@Lia91 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (min-width: 767px){
    #shopify-section-blog-template .blog-list-view .page-width{
    max-width: 600px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
}

You can change the value 600px to make it larger/smaller as per your wish.

diego_ezfy_0-1620612397067.png
diego_ezfy_0-1620612397067.png1865×940 76.4 KB

Please let me know whether it works.

Kind regards,
Diego

5

Thanks so much Diego! This worked a treat.

Thanks for your help!

6

@Lia91

You’re welcome. Wishing you all the best.

Kind regards,
Diego

7

It seems that this problem has been solved.

8

How about dawn theme 2.0, I can’t find asset>theme.css but section-blog-post.css, can you guide where is place the code on new dawn theme 2.0? Thanks

2 Likes
9

I’m also having this issue. That file doesn’t exist in the Dawn theme code

10

Do you know how to do this on the Dawn 2.0 theme. The file you indicated doesn’t exist in the theme file.

11

@AlexYZ_1
@frshop

Each theme works differently and has different HTML selectors.

Even using this very CSS code on Dawn could not yield the same results. I’d need to see the website’s URL to be able to code an unique solution for it.

Kind regards,
Diego

12

Hi Diego, this is my website https://meowwhisker.myshopify.com/, I just want to adjust the featured image on the desktop because it looks so blurry compared to mobile, thanks!

13

@diego_ezfy Any solution yet? My Shopify website is https://meowwhisker.myshopify.com/

14

Hi @diego_ezfy any chance you can help me fix this on the minimal theme? I’ve tried following your instructions but doesn’t seem to work for minimal and I cannot find anywhere in the code where I can change it (not experience at coding at all!).

Any help would be appreciated :slightly_smiling_face:

15

Has anyone been able to figure this out for the Dawn theme (or any of the 2.0 themes)? I see a few other people asking but haven’t seen an answer.

All my blog posts have a full span image that looks ridiculous - seems like Shopify designers didn’t bother to actually test the output for this theme or something.

1 Like
16

For anyone still looking for an answer to this, I came up with a quick and dirty fix for the Dawn theme that will work until I can figure out something better.

In section-blog-post.css locate this section (it starts at row 11 of the standard file):

.article-template__hero-container {
max-width: 130rem;

Update the 130 to a smaller number and it will scale the image smaller. I used 66 and my blog hero images are much better now.

6 Likes
17

Managed to finally get my image smaller on the minimal theme changing the following code (just reduced the width and height)

{% include ‘image-style’ with image: article.image, width: 445, height: 624, wrapper_id: wrapper_id, img_id: img_id %}

18

This was a great answer. The solution is working on the individual blog pages. Was finally able to fix this oversized image issue. However one another thing is troubling me, is how to change the image size of the featured image displayed on the main blog page i.e. which has the list of blog articles, from where we go the individual articles. Any suggestions.

1 Like
19

Any idea on how to do this in theme Studio?

20

Hey Diego!

It seems not to work on my theme, i have the webshop: https://moovershop.com

Could you maybe help me out? i tried to use this: @media (min-width: 767px) { #shopify-section-blog-template .blog-list-view .page-width { max-width: 200px !important; /* Ensure maximum width is applied / width: 100% !important; / Set width to 100% / display: block !important; / Ensure it’s displayed as a block element / margin: 0 auto !important; / Center the content horizontally */ } }