Hello, does anyone know how to remove blog page title please ?
Topic summary
Issue: Hide the “OUR BLOG” title on a Shopify blog page and remove the leftover space.
Context and inputs: A preview URL and screenshots were shared; the store is password-protected.
Proposed fix (implemented): Add CSS in base.css or theme.css to hide the blog heading (the h1 with classes blog__heading ff-heading fs-heading-2-base fs-heading-1-base-ns ta-c) by setting it to display: none. This successfully removed the visible title.
Follow-up adjustment: The remaining white space was not from the hidden title but from surrounding layout. To tighten spacing, add CSS targeting .blog.section.animation.animation–blog.is-visible and set padding-top: 0 to remove the extra top padding.
Notes: A duplicate of the padding-top guidance was posted once. Visuals (before/after screenshots) were provided to illustrate the result.
Outcome: User confirmed the title was removed and sought spacing refinement; the additional CSS was suggested to address it. No disagreements. Status: Resolved, with a request to mark the solution as accepted.
You can hide those with CSS
Can you please share URL and provide screenshot which title you want to hide ?
Thanks!
i sent preview, store is still password protected, thanks
Need to remove the OUR BLOG title please, thanks
Add this code in your base.css or theme.css:
h1.blog__heading.ff-heading.fs-heading-2-base.fs-heading-1-base-ns.ta-c {
display: none;
}
Result:
thanks much, it worked but can i get rid of the wide space where it used to be please ?
Actually, the title space doesn’t exist; by adding display: none, you eliminate the space. The white space you see is caused by the remaining elements. One option could be the following:
.blog.section.animation.animation--blog.is-visible {
padding-top: 0px;
}
Add it below the code I provided earlier. Hope it works; mark my responses as a solution if it does!
Actually, the title space doesn’t exist; by adding display: none, you eliminate the space. The white space you see is caused by the remaining elements. One option could be the following:
.blog.section.animation.animation--blog.is-visible {
padding-top: 0px;
}
Add it below the code I provided earlier. Hope it works; mark my responses as a solution if it does!
thanks much
1 Like