Basic costum footer

Solved
New Member
4 0 0

Hi All,

 

I want to add a basic code to top of my footer that have 5 elements, all have lines both top and bottom, all have a icon before text. I used grid to be compatible with mobile and desktop. I want to make side margins "zero px" so they have continuous lines at desktop. And I want to reduce the size of top and bottom margins so they wouldn't so separate each other for mobile. I'm using brooklyn theme and its default margins and lines is not like what I wanted to be. This is what I came with so far from searching internet all over. And can I put this to top of footer.liquid? 

I thought it should be easy but struggled a lot. 

<div class="grid">        
      
      <div class="grid__item one-fifth small--one-whole">      
        <p>
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">        
		<img src="truck.png?5830" width="33" height="16" align="bottom"> <font size="3">FREE DELIVERY</font> 
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottomtop: 1px;">
        </p>       
        </div>   
        
         <div class="grid__item one-fifth small--one-whole">        
        <p><hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">          
        <img src="payment.png?5830" width="20" height="20" align="bottom"> <font size="3">INSTALLMENT PAYMENT</font> 
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  </p>        
        </div> 
        
        <div class="grid__item one-fifth small--one-whole">       
        <p><hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  
        <img src="return66.png?5830" width="20" height="20" align="bottom"> <font size="3">FREE RETURN</font> 
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  </p>        
        </div>
        
        <div class="grid__item one-fifth small--one-whole">        
        <p><hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  
        <img src="secure.png?5830" width="20" height="20" align="bottom"> <font size="3">SECURE</font> 
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  </p>        
         </div>
         
        <div class="grid__item one-fifth small--one-whole">        
        <p><hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  
        <img src="guarentee.png?5830" width="20" height="20" align="bottom"> <font size="3">2 YEAR GUARANTEE</font>
        <hr style="height:1px; border:none; color:#024900; background-color:#000; width:100%; text-align:center; margin: 1 auto; margin-top: 1px; margin-bottom: 1px;">  </p>            
      </div>  
      
</div>
0 Likes

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

I didn't implemented to my site (live now, I don't want to implement before finish). But when I put it in customize theme it looks like this on mobile and desktop. I will find accurate icons for text. just an example

exapmple_mysite.pngexapmple_mysite_mobile.png

And I wanted it to be like this. for desktop and mobile

exapmple.pngexapmple_mobile.png

 

I want to figure out how to change margin sizes between elements.

 

 

 

 

0 Likes

Success.

@Ahmet_T,

Please modify your code

  <div class="grid ship-bar">        
      
      <div class="grid__item one-fifth small--one-whole">      
        <p>
    
		<img src="truck.png?5830" width="33" height="16" align="bottom"> <font size="3">FREE DELIVERY</font> 

        </p>       
        </div>   
        
         <div class="grid__item one-fifth small--one-whole">        
        <p>       
        <img src="payment.png?5830" width="20" height="20" align="bottom"> <font size="3">INSTALLMENT PAYMENT</font> 
         </p>        
        </div> 
        
        <div class="grid__item one-fifth small--one-whole">       
        <p>  
        <img src="return66.png?5830" width="20" height="20" align="bottom"> <font size="3">FREE RETURN</font> 
          </p>        
        </div>
        
        <div class="grid__item one-fifth small--one-whole">        
        <p>
        <img src="secure.png?5830" width="20" height="20" align="bottom"> <font size="3">SECURE</font> 
             
         </div>
         
        <div class="grid__item one-fifth small--one-whole">        
        <p> 
        <img src="guarentee.png?5830" width="20" height="20" align="bottom"> <font size="3">2 YEAR GUARANTEE</font>
          </p>            
      </div>  
      
</div>

Add below css to your theme.scss file

.ship-bar {
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.ship-bar img {
	vertical-align: middle;
}
@media only screen and (max-width: 749px) {
.ship-bar p {
	border-bottom: 1px solid #e6e6e6;
}
.ship-bar {
	border-bottom: none;
}
}
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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
New Member
4 0 0

I can't thank you enough. I had to tweak a bit because of the theme has padding under text. But I get the idea. Thanks again.

0 Likes