A Shopify store owner using the Aurora theme seeks to remove excessive spacing above and below collection titles, particularly on mobile view, despite setting padding to 0.
Solutions Provided:
Initial CSS fix: Multiple users suggest hiding .container__header.shop__header and adjusting .collection-hero__content-wrap padding to 0 via custom CSS files (bundle.css or custom.css)
Mobile-specific issue: The original code works on desktop but not mobile, prompting additional troubleshooting
Final solution: Dan-From-Ryviu provides updated code targeting the theme.liquid file’s <head> section, which successfully centers the collection title
Additional Context:
Status: Resolved. The store owner confirms the final solution works correctly.
There’s big spaces above and below collection title. Top & bottom padding is set at 0 but spacing is still too big. Please help me take away this spacing above and below!!!
Link: https://mnk61vh0fr5liiry-75721343252.shopifypreview.com
Go to collection page and view. Preferably on mobile - but desktop spacing is annoying too!
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file bundle.css
Step 3: Paste the below code at bottom of the file → Save
.container__header.shop__header {
display: none;
}
.collection-hero.section {
display: block;
}
also, To ensure optimal viewing experience, it’s crucial that the slide banner fits within a single screen without requiring scrolling. This approach aligns with Conversion Rate Optimization (CRO) principles, where each section should be contained within one screen. When users don’t have to scroll or zoom, they can seamlessly engage with the entire banner content, enhancing their viewing experience without distractions or interruptions.
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hi @babystore123 ,
Add below css to custom.css file.
.collection-hero__content-wrap {
padding: 0 !important;
}
.container__header.shop__header {
display: none;
}
Please don’t hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
That code worked for desktop but not mobile. Any idea how to get it working on mobile?
And I appreciate this feedback so much regarding the banner. Which size banner do you reccommend to fit that red box on desktop?
Thank you! 
Hi Dan! Thanks so much. It’s just not completely in the middle now - I think it’s due to the product padding, even though it’s set to 0. Any idea how to put it exactly in the middle?
Makes sense! Thank you!!!
You are very welcome!
