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

[Lia91]

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!

[LitExtension]

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! 

[Lia91]

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

Thanks!

[diego_ezfy]

@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.

Please let me know whether it works.

Kind regards,
Diego

[Lia91]

Thanks so much Diego! This worked a treat. 

Thanks for your help! 

[diego_ezfy]

@Lia91 

You're welcome. Wishing you all the best.

Kind regards,
Diego

[AlexYZ]

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

[frshop]

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

[diego_ezfy]

@AlexYZ 
@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

[AlexYZ]

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!

[AlexYZ]

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

[thetinywanderer]

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 🙂 

[conifer]

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.

[conifer]

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.

[thetinywanderer]

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 %}
<p>

[Vandy_Chow]

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.

[techctsolutions]

You are awesome man... and genius.. thanks

[frshop]

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

[theholistichive]

Any idea on how to do this in theme Studio? 

[KasperKorsholm]

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 */ } } 

[EllaBrown2021]

It seems that this problem has been solved.