reduce white space - product block and breadcrumbs

Store Design
, , , , ,

Topic summary

A user sought help reducing excessive white space between breadcrumbs and the product information block on all product pages using the Charge theme.

Solution Provided:

  • Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • The CSS targets specific spacing/padding elements to compress the gap

Outcome:

  • The user confirmed the solution worked successfully
  • Issue resolved with visible reduction in white space as shown in before/after screenshots

The discussion demonstrates a common CSS customization need for Shopify store layouts, specifically addressing vertical spacing in product page headers.

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

Hi have tried all i can think of including chat GPT but going round in circles here

im trying to reduce the spacing between the breadcrumbs and main product info block

its on all product pages and the theme is charge and example URL https://kitout-fitness.co.uk/collections/men/products/fiit-black-acid-wash-t-shirt

thanks shane

Screenshot 2025-05-12 154158.jpg
Screenshot 2025-05-12 154158.jpg1899×473 83.4 KB

1 Like
2

Hey @Shane_h

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1747061545746.png
Moeed_0-1747061545746.png1895×887 119 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

thankyou for your reply we didnt have that file in the code but the one below worked

4

Perfect thankyou :+1: