Vertical spacing between footer payment icons and social media icons

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
9854 2344 2941

Hi @Hader 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Hader
Tourist
5 1 3

beauxbreaux
Shopify Partner
288 25 58

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
Buy me a Coffee
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.