[Dawn] Decrease default spacing between TITLE and DESCRIPTION on Collection pages please?

[erreh]

Hey all, back with another question:

The current spacing between the title and description on collections pages, is way too much.
How can I decrease it by at least 50%?

Using Dawn theme.

Please see attached, thank you

[Maximus3]

If there isn’t a padding, margin, or line height setting that’s natively built into a theme, it’s not a very good theme… Perhaps you can get a better one?

[erreh]

Hahaha agreed, sometimes the simplest things arent customizable, which is really quite annoying! Hopefully someone can help save the day…

@Dan-From-Ryviu I see you have answered a similar query in the past, any chance you can assist here please?

Thank you!

[Manoj_j]

Hi @erreh ,
Please share your store url and password if password protected.
Thanks
Manoj

[tim_1]

There are several options.

Even though “Collection Banner” has no padding settings, “Collection grid” does, so it worth checking this first.

If this is not enough, try this code in “Custom CSS” of the “Collection Banner” section:

.collection-hero__text-wrapper > * {
  margin-bottom: 0 !important;
}

Or if need to change space inside “Collection Banner” section, play with those:

h1.collection-hero__title {
  margin-bottom: 0;
}

.collection-hero__description.rte {
  margin-top: 0;
}

Also, you can disable “Collection Banner” section and add a “Rich text” or any other section you like and use “collection title” via “Dynamic Source”.
“Rich text” does have padding settings…

[erreh]

Thanks for the reply!

Store URL is in the image on the original post, password is riango.

(For some reason when I share the actual store URL, it flags the post?)

[erreh]

Thank you so much for the detailed reply, really appreciate this!

So firstly, I checked the padding settings on Collection grid, and it was already set to 0, so no help from that.

The first code you provided, worked perfectly, once added to the custom CSS of the collection banner - it is so much better now! I wouldn’t mind to make it potentially even shorter, is that possible, being the value is already 0 that you set in the custom code?

Finally, great idea regarding the rich text - will definitely give that a shot also!

Thanks kindly

[Manoj_j]

Hi @erreh ,
Go to Online Store → Themes → Customize → Theme settings → Custom CSS
add this code at the bottom

/* Reduce top spacing for collection titles */
.collection-hero__title {
  margin-top: 0;      /* adjust as needed */
  padding-top: 0;     /* adjust as needed */
}

Save and refresh preview
here is the result

If this solves your problem, please don’t forget to like it and mark it as the solution, this way, others with the same issue can easily find and benefit from it.
Thanks
Manoj