How can I remove extra spacing between containers?

[usmekhan91]

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/

[Hallway · Accepted solution]

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.

[Hallway · Accepted solution]

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.

[Dan-From-Ryviu · Accepted solution]

Hi @usmekhan91 

You can remove this space by adding this code to your theme.css file before </head> tag in Online store > Themes > Edit code 

<style>
#shopify-section-template--16230291669162__heading_template div.page-head { margin-bottom: 0px; }
.t4s-desc-collection { margin: 0px !important; }
.t4s-collection-header { margin-top: 0px !important; }
</style>