Space between collection description and banner

Solved
Highlighted

Hi all,

 

Pretty basic question, so sorry! I'm just wondering if anyone knows how I can reduce the gap between the collection description and the klarna banner on my collection pages. In this example, my description is a banner, however it happens with other pages with just a text description too. Please see image and code below.

 

Thanks!

 

gap between bannerandklarna.PNG

 

  {%comment%}<header class="section-header section-header--large">
    <h1 class="section-header__title{% if section.settings.tags_enable or section.settings.sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>{%endcomment%}
    {% if section.settings.tags_enable or section.settings.sort_enable %}
    <div class="section-header__link--right">
      {% if section.settings.tags_enable %}
        {% include 'collection-tags' %}
      {% endif %}
      {% if section.settings.sort_enable %}
        {% include 'collection-sorting' %}
      {% endif %}
    </div>
    {% endif %}
  </header>

  {% if collection.description != blank %}
    <div class="rte rte--header">
      {{ collection.description }}
    </div>
    <hr class="hr--clear hr--small">
  {% endif %}
  <!-- Placement v1 -->
<klarna-placement
  data-id="0b4fddcc-71c1-4561-a833-507224c2daa5" 
></klarna-placement>
<!-- end Placement -->
Introducing everyday urban clothing at northspoke.com
0 Likes
Highlighted

This is an accepted solution.

Hello @oscarrmoore,

add below css

#shopify-section-collection-template .rte.rte--header,#shopify-section-collection-template .rte > div {
	margin-bottom: 0;
}
#shopify-section-collection-template .hr--clear.hr--small {
	margin: 0;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted

Hi,

 

Thanks for your input - unfortunately it wouldn't save in theme.scss.liquid - is that the right place?

Introducing everyday urban clothing at northspoke.com
0 Likes

Ignore me, it worked!! Thanks so much!! :)

Introducing everyday urban clothing at northspoke.com
0 Likes
Highlighted
New Member
9 0 0

I'd suggest checking out the Smarketly Page Builder Editor App to help you set up your website banner, even with minimal coding skills.

It gives you the option to alter the grid view to a tangle from 4-8 and the grid paddings to the left, right or full width size

0 Likes