How to adjust footer and align social media links in Dawn theme?

[hasanali1]

hi, im trying to align the social media with the links

and increase the copyright text and move it a the top as its too low.

any help is appreciated !

https://marthajewelry.myshopify.com/

password - test

[websensepro]

Hi @hasanali1

1. Go to the online store

2.Then go to Customize select footer then scroll down custom css and paste the code:

ul.footer__list-social.list-unstyled.list-social {
margin-left: -4px;
}

.copyright__content {
font-size: 1.7rem;
}

[BSS-Commerce]

Hi @hasanali1

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Step 1: Navigate to the “Online store” section in Shopify admin, select the “Themes” tab, click the “…” and select “Edit code” to edit the theme:

Step 2: Find the file “section-footer.css” in the list of files:

Step 3: Open the file, scroll to the last line, add this code and click “Save” button

@media screen and (min-width: 750px) {
  .footer__column.footer__column--info {
    position: relative;
    top: -20px;
  }
}

@media screen and (min-width: 750px) and (max-width: 800px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: 4px;
  }
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -2px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1080px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -0.6rem;
  }
}

@media screen and (min-width: 1080px) and (max-width: 1180px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -0.8rem;
  }
}

@media screen and (min-width: 1180px) and (max-width: 1250px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -1rem;
  }
}

@media screen and (min-width: 1250px) and (max-width: 1300px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -1.3rem;
  }
}

@media screen and (min-width: 1300px) and (max-width: 1400px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -1.5rem;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1480px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -1.8rem;
  }
}

@media screen and (min-width: 1480px) and (max-width: 1548px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -2rem;
  }
}

@media screen and (min-width: 1548px) {
  .footer__list-social.list-unstyled.list-social {
    position: relative;
    left: -23px;
  }
}

Result:

The above code is edited according to personal preference, you can customize the newly added code to change as you like.

Good luck!