Hi Community,
I am puzzled to remove extra spacing between containers, I had tried every option but unable to remove it. Can you help me in this regards?
URL: https://o2hmeyh0ofc3kmpg-61554688170.shopifypreview.com/
Topic summary
A user is struggling to remove unwanted spacing between containers on their Shopify store.
Root Cause Identified:
The extra spacing comes from a CSS rule applying margin-bottom to the div.page-head element, defined in the assets/heading-template.css file.
Proposed Solutions:
-
Option 1: Add custom CSS code to override the margin by setting
margin-bottom: 0for.page-headanddiv.page-headelements, targeting both mobile and desktop breakpoints (min-width: 768px). -
Option 2: Add the override code directly to the assets/heading-template.css file at the bottom.
-
Option 3: Use Shopify’s Theme Customizer to add custom CSS, which would be the recommended approach for theme modifications.
Community members provided specific CSS snippets and referenced the theme file locations where changes should be made. Screenshots were shared to illustrate the problematic CSS rules.
Your theme has a CSS rule that adds margin-bottom to the div element with the class page-head.
The CSS rules are defined in assets/heading-template.css as follows:
.page-head {
padding: var(--space-padding-mb) 0;
margin-bottom:var(--space-mg-mb);
}
@media (min-width: 768px){
div.page-head {
padding: var(--space-padding-dk) 0;
margin-bottom:var(--space-mg-dk);
}
}
One way to adjust this would be to add custom CSS to your store in Theme Customiser. You could add the below code to remove the margin.
.page-head {
margin-bottom: 0;
}
@media (min-width: 768px){
div.page-head {
margin-bottom: 0;
}
}
Alternatively, you could add the CSS above to the bottom of the assets/heading-template.css file in your theme.
Hi @usmekhan91
You can remove this space by adding this code to your theme.css file before tag in Online store > Themes > Edit code
