Make footer social media icons left aligned

[ads18922]

Hello, i would like to make my footer social media icons left aligned and also reduce the gap slightly between them, as the gaps are too big:

m

my store is www.antico-abito.com , theme is dawn

[dmwwebartisan]

@ads18922

Please add the following code at the bottom of your css file.

@media screen and (max-width: 749px) {
.footer-block--newsletter {
    align-items: flex-start !important;
    gap: 0rem !important;
    margin-top: 0rem !important;
}
}

Hope this works!

[Manoj_j]

Hi @ads18922 ,
Go to Online Store → Themes → Actions → Edit code
go to Assets/base.css and add this code at the bottom

/* Left-align footer social icons */
.footer__list-social {
  display: flex !important;
  justify-content: flex-start !important; /* Align left */
  gap: 8px !important; /* Reduce spacing between icons */
}

/* Optional: make icons slightly smaller or uniform */
.footer__list-social .list-social__item svg {
  width: 20px;
  height: 20px;
}

save and refresh preview.
here is the result

Thanks
Manoj

[DitalTek]

Hi @ads18922

To adjust as like you wanna, you can use this code:
First you need go to Admin → Online Store → Themes → Click to three dots → Edit code → assets → section-footer.css

and then paste code bellow to that file:

@media screen and (max-width: 749px){
   .footer__content-top .footer__list-social.list-social {
      width: 100%;
      justify-content: flex-start;
   }
}

this is result:

[topnewyork]

Hi @ads18922,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    display: flex
;
    align-items: start;
}

Thank you!