How to eliminate the space between breadcrumb and product?

Store Design
,

Topic summary

A user seeks to reduce excessive vertical spacing between the breadcrumb navigation and product content on their Shopify store. An attached screenshot illustrates the gap issue.

Proposed Solutions:

Multiple developers offer CSS-based fixes:

  • Option 1: Add .ltn__breadcrumb-area {margin-bottom: 50px !important;} to the bottom of style.css
  • Option 2: Insert custom CSS in theme.liquid before </head> targeting .ltn__breadcrumb-area with adjusted margin-bottom
  • Option 3: Place CSS above </body> in theme.liquid with similar margin adjustments

Follow-up Issue:

Another user (Shane_h) reports difficulty reducing spacing below ~40px on the Charge theme’s collection pages despite trying values of 0, 10, and 20.

Resolution:

The issue is resolved by adding media query CSS to Custom CSS settings:

@media (min-width: 750px) {
  :is(.spaced-section) {
    margin-top: .5rem !important;
  }
}

Shane confirms this solution works successfully.

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

Screenshot 2023-09-14 143059.png
Screenshot 2023-09-14 143059.png1251×816 168 KB

How Can I Remove The Spac E Between Breadcrumb And Product

2

Hello @mahasobhi047
Its Artzen Technologies! We will be happy to help you today.

PLEASE SEND ME YOUR STORE URL

Let me know if need further assistance
Regards,
Artzen Technologies

3

https://buy4lessus.com/

4

Hi @mahasobhi047

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the style.css file:

.ltn__breadcrumb-area {margin-bottom: 50px !important;}

Regards,

San

5

Hi @mahasobhi047

You can add this code to theme.liquid file before

Screenshot 2023-09-14 at 16.46.53.png
Screenshot 2023-09-14 at 16.46.53.png1586×358 375 KB

6

Hello @mahasobhi047
Its Artzen Technologies! We will be happy to help you today.

Follow the Below Steps:

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following CSS at the bottom of the file above 
​

AFTER ADDING ABOVE CSS THE RESULT:

Artzen_tech_0-1694684884787.png
Artzen_tech_0-1694684884787.png1345×584 356 KB

Let me know if need further assistance
Regards,
Artzen Technologies

7

Hi Dan so i have done this on our charge theme [email removed] this URL https://kitout-fitness.co.uk/collections/women and set it at various points 0, 10, 20 it will increase over about 40 but wont go below that i wonder if you have any suggestions for this please thanks shane

Screenshot 2025-05-11 123339.jpg
Screenshot 2025-05-11 123339.jpg1490×466 80.2 KB

1 Like
8

Please add this code to Custom CSS of your theme settings

@media (min-width: 750px) {
    :is(.spaced-section) {
        margin-top: .5rem !important;
    }
}
9

perfect thank you Dan

regards shane