Solved

Vertical spacing between footer payment icons and social media icons

Hader
Tourist
5 1 3

Good day. 

 

I am tired of trying to do this myself. Can anybody please assist with this.

I am trying to reduce the vertical spacing between the social media icons and the payment icons.

I am currently using Dawn theme.

Hader_1-1705094775716.png

Accepted Solution (1)
Hader
Tourist
5 1 3

This is an accepted solution.

Thank you for all the efforts people. You are all amazing.

I found the solution.

It was in my section-footer.css

This line

.footer__content-top {
padding-bottom: 5rem;
display: block;

 

Had to be changed to:

.footer__content-top {
padding-bottom: 1rem;
display: block;

 

Thank you so much for the efforts everyone. I truly appreciate it.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Hi @Hader 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Hader
Tourist
5 1 3

beauxbreaux
Shopify Partner
183 13 32

Hello. 

Here are the steps:

 

  • Go to online store in the admin 
  • Under the Themes menu click the drop-down next to the Customize button and select Edit Code
  • There is a search bar at the top type in: component-list-payment.css (or find it in your assets folder)
  • Next to adjust the payment icons you will find this selector: .list-payment__item (To search for this selector click anywhere on the page and hold down CTRL and click F; you will see a search bar pop up)
  • Notice the padding (default is 0.5rem) you can change this to 0.4rem or whatever you see fit.

Next to change the social icons:

  • In your assets folder find: component-list-social.css
  • Find: .link list-social__link
  • The default you will see is (1.1rem) you can reduce this to something like 0.7 rem or whatever size you see fit.

Play around with the numbers to see what size looks the best

 

Hope this helps. 

Beaux Barker
Developer
Hader
Tourist
5 1 3

Thank you so much for the response.
I've tested it however the issue still remains.

 

I should have added that i added the Payment icons by editing the code in the footer.liquid section.

I am not sure if this makes any difference?

Hader_0-1705099737412.png

 

Hader
Tourist
5 1 3

This is an accepted solution.

Thank you for all the efforts people. You are all amazing.

I found the solution.

It was in my section-footer.css

This line

.footer__content-top {
padding-bottom: 5rem;
display: block;

 

Had to be changed to:

.footer__content-top {
padding-bottom: 1rem;
display: block;

 

Thank you so much for the efforts everyone. I truly appreciate it.