Is there a way to display the blog post grid without the title/excerpt square cutting into the side of the blog image? Is it possible to make the title/excerpt appear below the image, so the image can display more fully?
Currently:
Topic summary
A user seeks to modify the Stiletto theme’s blog post grid layout, where title/excerpt boxes currently overlap blog images. They want the text to appear below images for fuller image display.
Proposed Solutions:
- Add CSS code to
theme.cssfile:.blog-posts.section .article-item { display: block !important; } - One responder requests store URL and password for direct troubleshooting
Status:
- Initial poster’s resolution unclear
- Another user encountered the same issue later
- A community member shared a working solution from a related Shopify forum thread about repositioning blog post text excerpts
Key Detail: The issue involves CSS styling of the .article-item class within the blog posts section. The suggested fix changes the display property to block layout, which should stack elements vertically rather than allowing overlap.
Hi @SEWardrobe ,
Go to Assets > theme.css and paste this at the bottom of the file:
.blog-posts.section .article-item {
display: block !important;
}
Hope it helps!
Hi @SEWardrobe
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
@SEWardrobe did you ever find a solution to this problem? I’m hoping to resolve as well. Thank you!
Hi CJ, you’ve likely solved this long ago, but just in case… i found this article and this code worked for me!