How can I spread out trust badges & text on footer?

Mang_Yu
Tourist
3 0 2

This is how it looks like right now. I want the trust badges and text to be spread out evenly along the page width. Thank you.

Screen Shot 2021-03-18 at 12.35.15 AM.png

 

footer.liquid


<div class="product-reasons">
<ul class="res_ul">
<li>
<img src="image1 url"
width="120px" height="105.7px">
<span>FREE DELIVERY</span>
<p>For orders over $50</p>
</li>
<li>
<img src="image2 url"
width="120px" height="105.7px">
<span>15 DAYS RETURNS</span>
<p>No questions asked</p>
</li>
<li>
<img src="image3 url"
width="120px" height="105.7px">
<span>SECURE PAYMENT</span>
<p>100% Safe checkout</p>
</li>
<li>
<img src="image4 url"
width="120px" height="105.7px">
<span>24/7 SUPPORT</span>
<p>Dedicated support</p>
</li>

</ul>
</div>

theme.scss

.res_ul li span{display: block; font-size: 20px; font-weight: 600;}
.product-reasons ul{list-style: outside none none; margin: 0 auto; padding: 0; display: flex; max-width: 1050px;}
.product-reasons{text-align:center;}
.product-reasons ul>li{display: inline-block; margin-bottom: 10px; text-align: center; vertical-align: top;}
@media only screen and (max-width:480px){.product-reasons ul>li{width:45%;}.product-reasons ul{display:block;}}

Replies 2 (2)

sophiagarcia
Excursionist
15 0 1

If your trust badges look cheesy or like they don't belong in the checkout,  Typically these services will give you either an image file (unlikely) or javascript  your site seal, and then paste this into a new text widget in your footer:  figure out how it's outputting that button as the template may be overridden.

 

I hope this answer will help!

Thanks
Sophia Garcia - Creative Director - UMC Canada

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Mang_Yu 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.