How can I reduce the space between cart headings on my webpage?

Topic summary

A user seeks to reduce spacing between the “Product,” “Quantity,” and “Total” column headings on their cart page.

Proposed Solution:
One respondent provides custom CSS code targeting screens 990px and wider:

  • Sets .cart-item__details width to 25rem
  • Adjusts padding-left to 10px for .cart-items.cart-items__heading--wide and .cart-item.cart-item__quantity
  • Recommends adding this code to the base.css file

Alternative Suggestion:
Another user shares a screenshot and proposes redesigning the layout by placing payment methods beside the cart items instead of below them, offering a different approach to space optimization.

The discussion remains open with no confirmation from the original poster on whether either solution was implemented or effective.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.

hi,

how can i decrease the space between product - quantity - total columns in my cart page.

URL: nightlightcity.com

pass: bowchu

Hello @ni3

ADD this CSS below of base.css

@media screen and (min-width: 990px)
.cart-item__details {
width: 25rem !important;
}
.cart-item .cart-item__quantity {
padding-left: 10px !important;
}
.cart-items .cart-items__heading–wide {
padding-left: 10px !important;
}
}

@ni3

You can make design also like this instead of put payment method beside put it below. I