How To Remove White Space Under Collection Title?

Store Design

Topic summary

Main issue: Excessive white space appears under the collection title in a Shopify store using the Crave theme; the user wants bottom spacing to match the smaller top spacing. A screenshot was provided to illustrate the gap.

Key actions and solution:

  • Store URL shared: https://deemzcases.com
  • A CSS fix was suggested, added to assets/base.css within a mobile-only media query (max-width: 749px):
    • Reduce margins on .collection-hero__title
    • Set the product grid section’s top margin to 0
  • Result: The fix worked on mobile, reducing the lower gap; it also slightly reduced top spacing, which the user accepts and can adjust.

Current status and open question:

  • On desktop, the title is not centered (centering appears only on mobile). The user asks how to apply the styling for both mobile and desktop.
  • The provided CSS targets only mobile screens (via the media query), so desktop behavior remains unchanged.

Outcome: Partial resolution. Mobile spacing fixed; desktop centering and consistent spacing across devices remain unresolved pending additional CSS for larger breakpoints or global rules.

Summarized with AI on February 22. AI used: gpt-5.
1

Hello,

How can I remove this unnecessary white space under the collection title? As you can see, there is a small space above the title but a large one under. I would like to have the same amount of space on the bottom that there is on the top. I am using the Crave theme and the only solutions I have found so far are under things like theme.scss.liquid, timber.scss.liquid, etc. Thank you in advance!

=

Screen Shot 2022-03-03 at 8.03.01 PM.png
Screen Shot 2022-03-03 at 8.03.01 PM.png1390×1385 360 KB

1 Like
2

Hi @a_hs82 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

3

Hi @a_hs82 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

Here is the URL: https://deemzcases.com

5

@a_hs82

Please add the following CSS to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.collection-hero__title {margin: 1rem 0rem 0rem 0rem !important;}
#shopify-section-template--15401306095785__product-grid.section {margin-top: 0px !important;}
}

Thanks!

1 Like
6

Wow! I put it in and it worked! It did made the top part slightly smaller though. No problem however, as now I can change the spacing thanks to the code you gave me. Thank you so much!

7

@dmwwebartisan Also, I just checked on my computer and it is not centered there, only on mobile. How can I make it for both?