Hey all! I already have padding set to 0 in the product information section of Horizon, but there’s still a lot of extra blank space / padding between each section here on both desktop and mobile. Does anyone know where I would edit that on the code side? Screenshot attached. Thanks!
Ah okay thanks, margins. So yeah…is there some code I can add or adjust to edit the margins for specifically this area on mobile and desktop?
Hi,
Hope this will help
-
Horizon’s extra spacing comes from CSS margins and gap not section padding
-
Edit base.css / theme.css not the section settings
CSS example
.product__info > * {
margin-bottom: 0.5rem;
}
.product__info {
gap: 0.5rem;
}
If the spacing is different on mobile, check for media queries like:
@media (max-width: 749px) {
.product__info {
gap: 1rem;
}
}
-
Look for .product__info and .product__block margin or gap values
-
Reduce spacing instead of removing it completely
-
Use browser inspect to pinpoint the exact rule
Yep, Horizon does this a lot — the padding you’re seeing usually isn’t coming from the product information section itself. It’s almost always margins baked into the individual blocks (title, price, description, etc.) or the wrapper around them.
On the code side, inspect one of the gaps and you’ll likely see something like .product__block, .product__info > *, or section spacing variables. A quick fix that often works is adding something like this to your custom CSS:
.product__info > * {
margin-bottom: 0;
}
.product__info {
gap: 0;
}
If that’s still not enough, Horizon sometimes uses CSS variables for spacing, so look for --spacing-* values on the product section and override those.
Also mentioning it since this exact thing comes up a lot — I built Easy Edits, which lets you click directly on those sections and reduce spacing visually, or just tell the AI “remove extra spacing between product sections” and it handles the selectors for you. I’m the developer.
Hi, this is a really common Horizon gotcha, and it’s two separate things — where the space comes from, and why your CSS might not even be applying. 1) The space isn’t the section padding. In Horizon, the gap between the blocks inside the product information group is controlled by the group’s own spacing, not the section’s top/bottom padding. Before any code: in the editor, click the product information block group (the container holding title, price, buttons, description) and look for a “Gap” or spacing control — turning that down removes most of it with no code at all. 2) If space remains, it’s a per-block margin or a row-gap on the parent. Right-click the empty space → Inspect, then click up the tree until you find the element carrying the margin (or a flex/grid parent with a gap) — that’s your target. The pattern is: kill the child margin AND the parent’s row-gap.
@media all {
.product-information .group-block,
.product-information__group > * { margin-block: 0; }
.product-information { --gap-block: 0; row-gap: 0; }
}
(Horizon’s class names differ from Dawn — use whatever the inspector actually shows; the two-part fix stays the same.) 3) The reason a lot of Horizon CSS “does nothing”: Horizon doesn’t load custom.css from theme.liquid like older themes. Add your link in snippets/stylesheets.liquid instead, e.g. {{ ‘custom.css’ | asset_url | stylesheet_tag }}. If your CSS wasn’t applying at all, that’s almost always why. Paste the class name the inspector shows on the spacing element and I’ll give you the exact one-liner.
Hey @ryanb819z .
The gap is likely caused by the spacing within each block, not the section padding you adjusted. Check the CSS for individual blocks like the variant picker or size chart link. If you specify which gap you want to close, such as the space between Style and Color, I can help you find the right spot to fix it.