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

Lia91
Tourist
9 0 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!

Replies 18 (18)

LitExtension
Shopify Partner
4860 1001 1132

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Lia91
Tourist
9 0 1
diego_ezfy
Shopify Partner
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Lia91
Tourist
9 0 1

Thanks so much Diego! This worked a treat. 

Thanks for your help! 

diego_ezfy
Shopify Partner
2935 562 883

@Lia91 

You're welcome. Wishing you all the best.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

AlexYZ
Shopify Partner
131 1 38

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
Visitor
2 0 0

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

diego_ezfy
Shopify Partner
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

AlexYZ
Shopify Partner
131 1 38

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
Shopify Partner
131 1 38

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

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

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

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

frshop
Visitor
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.

theholistichive
Visitor
3 0 0

Any idea on how to do this in theme Studio? 

EllaBrown2021
Excursionist
92 0 9

It seems that this problem has been solved.

banned