A user wanted to overlay the blog post title, author, and date directly on the featured image in Shopify’s DAWN theme, rather than displaying them below the image.
Initial Solution:
main-article theme filetheme.liquid to position elements over the imageFinal Implementation:
The original poster refined the solution by adding custom CSS to section-blog-post.css:
Outstanding Issue:
Another user reported the solution works on desktop but causes title text to be cut off on mobile devices. No fix has been provided yet.
Additional Question:
A user asked whether this code would work on the Debut theme (different from DAWN), but received no response.
Above image: This is exactly what I would like to achieve.
On the blog posts, the title of the blog post, author and date with an overlay on the featured blog post image.
Basically
I hope this explains it ok? Currently, the DAWN theme has all this under the featured image.
Thanks in advance.
Below: This is the current DAWN theme layout.
Hello @Pandaboomer ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
Open your main-article theme file
Move the below code to before the last above
# {{ article.title | escape }}
Open your theme.liquid theme file
Add the below code before
For example,
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
@GemPages Great Job! 
Almost there!
I just need the overlay (slightly darkening the image) to help the text pop, and I would like the text white.
Thanks so much!
@GemPages It’s OK. I managed to work it out. Thank you for your previous assistance. It is much appreciated.
I added to the section-blog-post.css file:
.article-template .article-template__hero-container {
background-color: #413F3D;
}
.media {
opacity: 0.5;
}
.article-template__title:not(:only-child) {
margin-bottom: 1rem;
color: white;
text-align: center;
}
Problem Solved.
I hope others find my discussion/post useful.
Hello @Pandaboomer ,
It’s perfect.
I am also so glad that my solution can help.
Best regards,
GemPages Support Team
Will this code work on the debut theme?
currently, I’m facing the same problem on my website. I don’t know where to start it because it has some different functionalities than Dawn. so can you help me with it?
Link to my website: https://www.industrialpuppy.com/blogs/news/unleashing-independence-3-things-to-know-when-looking-for-a-service-dog
I’ve just tried this and it works great for desktop, but when viewing via a mobile a lot of the article title letters get cut off. Did you notice this and if so did you find a fix?
