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

Lia91
New Member
9 0 0

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!

Replies 17 (17)
LitExtension
Shopify Partner
3756 744 785

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! 

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Lia91
New Member
9 0 0
diego_ezfy
Shopify Partner
2725 511 690

@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

 



Please let me know whether it works.

Kind regards,
Diego

Lia91
New Member
9 0 0

Thanks so much Diego! This worked a treat. 

Thanks for your help! 

diego_ezfy
Shopify Partner
2725 511 690

@Lia91 

You're welcome. Wishing you all the best.

Kind regards,
Diego

EllaBrown2021
Excursionist
92 0 9

It seems that this problem has been solved.

AlexYZ
Tourist
6 0 1

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
New Member
2 0 0

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

frshop
New Member
2 0 0

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

diego_ezfy
Shopify Partner
2725 511 690

@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
Tourist
6 0 1

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
Tourist
6 0 1
thetinywanderer
New Member
6 0 0

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
Tourist
4 0 4

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
Tourist
4 0 4

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
New Member
6 0 0

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
New Member
2 0 0

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.