Brooklyn Theme: Custom section snippet problem

Highlighted
Tourist
9 0 3

Hi, I have created a custom section that is displayed at the bottom of the product and collection pages. The image is how I currently go it, however I have a problem with my coding as the grid wrapper is messing with my footer as it pushes the last section block down below the 1st footer section block, as indicated by the green line:

Screenshot 2020-07-25 at 19.06.14.png

This is how the footer is supposed to look like:

Screenshot 2020-07-25 at 19.09.03.png

I am used html code to create my section snippet and I am not so familiar with the liquid language to create this section properly to ensure that it does not affect the footer... Please help.

Here is the code that I have used for the section snippet:

<div class="grid-wrapper">
  <div style="text-align: center;"><h2>WHY SHOP WITH US</h2></div>
  
  <div class="grid">
    
  <div class="grid__item small--one-whole medium--one-half large--one-quarter">
	<div style="text-align: center;"><a href="https://ubikhome.co.za/pages/contact-us" title="Ubik Home Contact Us"><img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Store_locator-01_copy.png?v=1594928261" alt="Ubik Home Store locator" width="80px" height="80px" /></a></div>	
		</a><div style="text-align: center;"><h5><strong>LOCATION</strong></h5>
    <span>Locate Ubik Home store</span></div>
	</div>
  
  <div class="grid__item small--one-whole medium--one-half large--one-quarter">
		<div style="text-align: center;"><a href="https://ubikhome.co.za/pages/delivery" title="Ubik Delivery Policy"><img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Delivery-01_copy.png?v=1594928317" alt="Ubik Home Delivery page" width="80px" height="80px" /></a></div>
    		<div style="text-align: center;"><h5><strong>DELIVERY</strong></h5>
              <span>Everything you need to know about your delivery</span></div>
 		 </div>
  
  <div class="grid__item small--one-whole medium--one-half large--one-quarter">
   		<div style="text-align: center;"><a href="https://ubikhome.co.za/policies/refund-policy" title="Ubik Home Return and Refund Policy"><img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Returns-01_copy.png?v=1594929114" alt="Ubik Home Return Icon" width="80px" height="80px" /></a>
    </div>
    <div style="text-align: center;"><h5><strong>RETURNS</strong></h5>
      <span>Easy returns via email</span></div>
  </div>
  
  <div class="grid__item small--one-whole medium--one-half large--one-quarter">
    	<div style="text-align: center;"><a href="https://ubikhome.co.za/pages/secure-payments" title="Ubik Home Secure Payments"><img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Payments-01_copy.png?v=1594929160" alt="Ubik Secure Payments icon" width="80px" height="80px" /></div>
    <div style="text-align: center;"><h5><strong>SECURE PAYMENTS</strong></h5>
    <span>We offer a secure payment gateway</span></div>
  </div>
    
</div>
</div>


{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

 

0 Likes