A user seeks to make blog post featured images responsive in Shopify’s Dawn theme, with specific requirements:
Desktop: Image should sit above the title
Mobile: Image should occupy 90% of viewport width
A proposed CSS solution was offered targeting the section-blog-post.css file, modifying two classes:
.article-template__hero-container: Adjusted max-width, added flexbox centering.article-template__hero-medium: Changed height to auto, set width to 90%The solution included before/after screenshots showing the intended result.
Current Status: The original poster implemented the suggested CSS changes but reports the image doesn’t display correctly on mobile as shown in the example screenshots. The issue remains unresolved, with the poster requesting alternative solutions.
For desktop i just want it kinda sitting above my title and for mobile, when I actually click into the blog, i want that featured image to just be 90% of the viewport width.
Not sure if this is doable or if anyone has any solutions!
thank you so much in advance
Hi @environmentalPa !
This is definitely doable! Here’s a solution that should work:
Go to Theme > Customise > Edit Code > Find file section-blog-post.css and edit the following classes around line 11:
From:
.article-template__hero-container {
max-width: 130rem;
margin: 0 auto;
}
.article-template__hero-medium {
height: 22rem;
}
To:
.article-template__hero-container {
max-width: 72.6rem;
margin: 0 auto;
display: flex;
justify-content: center;
}
.article-template__hero-medium {
height: auto;
width: 90%;
}
This solution:
This is how it’ll appear:
Let me know if you have any questions. Hope this helps!
Hi TiktitaTech,
I tried your solution but oddly the image doesn’t display on mobile like your screenshot.
I am certain I changed everything as you suggested.
Thank you for getting back to me though. If you have any other solution please let me know!
Regards
