Change position of the social media icon(s) in the footer

[EdensBakehouse]

I would like to place the social media icons on the same line that is also the starting point of the text under Contact.

Also I would like to be able to change the size of the icons.

Website: edensbakehouse.nl

Password: yuidri

[websensepro · Accepted solution]

Hi @EdensBakehouse 

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.

span.svg-wrapper {
    width: 35px !important;  
}
@media(min-width:750px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    width: 37.3%;
    margin: auto;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    
}
}
@media(min-width:1024px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    padding-left: 5px !important;
}
}
@media(max-width:1023px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    padding-left: 0px !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[EdensBakehouse]

Thank you for helping me with step 1.

Is there also a possibility to make the icons bigger? (step 2)

[topnewyork]

Hello, @EdensBakehouse 

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

@media (min-width: 769px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 0 !important;
    padding-left: 35rem !important;
}
}
@media (max-width: 768px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in{
    padding-left: 0px !important;
}
}

 Thanks! 

[pawankumar]

Hi @EdensBakehouse 
Please put this css in theme.liquid before body closing tag </body>

<style>
@media(min-width: 769px) {
    .footer-block--newsletter.scroll-trigger.animate--slide-in {
    width: calc(100% / 3);
    margin: auto;
    justify-content: flex-start;
    .list-social__item:first-of-type a {
    padding-left: 0px;
}
}
}
</style>

Thanks!