More padding above blog post

Shopify Discussion

Topic summary

A user seeks to add more padding above all blog posts on their Shopify store, both current and future posts. They provided a password-protected URL and a screenshot showing the current layout.

Two CSS solutions were offered:

  1. General approach: Add CSS to the Assets folder targeting .article-template with padding-top: 50px !important; (adjustable value)

  2. Specific approach: Edit section-blog-post.css in the theme’s assets folder, adding a media query for screens 750px+ that applies margin-top: 9rem; to .article-template header. This solution included a before/after screenshot demonstrating the increased spacing.

Status: The discussion remains open with no confirmation from the original poster about which solution was implemented or if the issue is resolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How am I able to add more padding at the top of all of my blog posts, now and in the future?

THank you

URL: https://www.livwithin.com.au/blogs/news/the-power-of-natural-dyes-honouring-tradition-in-modern-yoga

PW: pewpog

Screenshot 2025-03-20 at 15.14.49.png
Screenshot 2025-03-20 at 15.14.49.png2540×1277 598 KB

2

Hi @ellacoker

You can try adding the following CSS in the bottom of the Assets folder :_

/* Add extra top padding to all blog posts /
.article-template {
padding-top: 50px !important; / Adjust the value as needed */
}

Let me know if you need an alternative solution will provide that too.

3

Hello @ellacoker
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-blog-post.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.article-template header {
margin-top: 9rem;
}
}

result

44.png
44.png1366×607 560 KB

If this was helpful, hit the like button and accept the solution.
Thanks