Move Email signup in the footer menu

[birdhavencreate]

Hi Team,

https://birdhavencreations.com/ 

I have three queries -

1. I am trying to move the "Email Signup" form to the same level as other Footer Menu instead of showing the default bottom of the Quicklinks

2. I want the Social Media Icons to be right below Email Signup so that overall Footer menu looks clean. 

3. The current "SUPPORT" and "ABOUT" footer menu doesn't  look hortizontally spaced compared to the first text box. How to move these two columns to slightly right ?

[Made4uo-Ribe · Accepted solution]

Hi @birdhavencreate 

It is like this?

If its, try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column;
    margin-top: 0px;
    width: 35%;
}

.footer-block__newsletter {
    margin-left: auto;
    margin-right: 0px !important;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: flex-start;
    margin-bottom: 50px;
}                                              
.footer__content-top.page-width {
    display: flex;
}
.footer-block__newsletter {
    width: max-content;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 66px;
}

• And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[birdhavencreate]

Nice. This works. Just a small follow-on request

Can I have 5 lines in the first column by increasing the column width, then the second and third columns can have slightly lower column width? 

[birdhavencreate]

@Made4uo-Ribe I just noticed that your solution works for Desktop but gets distorted badly on mobile. I want it to be the original configuration in mobile where each of the columns is stacked below the other

[Made4uo-Ribe]

Yes, cause that is only for desktop view. To prevent this code showing on mobile add this one. 

Same Instruction:

@media only screen and (min-width:749px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column;
    margin-top: 0px;
    width: 35%;
}

.footer-block__newsletter {
    margin-left: auto;
    margin-right: 0px !important;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: flex-start;
    margin-bottom: 50px;
}                                              
.footer__content-top.page-width {
    display: flex;
}
.footer-block__newsletter {
    width: max-content;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 66px;
}
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[nadylina]

Hello there
I have inserted this code to my Crave theme and it worked. Thanks so much!
The only problem I would have right now is that the Social Media Icons are not right below Email Signup. Also would it be any way to extend the first column I have in the footer so the content can fit better?
If possible, I can leave here my website so you can have an idea of what I was meaning.
www.winningnaturals.com
Thanks so much
Nadylina

[Made4uo-Ribe]

Welcome, Good to know it help in your store. 

Do you mean like this?

If it is try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer__content-top.page-width {
    justify-content: space-between;
}
@media only screen and (min-width: 749px){
ul.footer__list-social.list-unstyled.list-social {
    align-self: end;
}
.footer-block--newsletter {
    justify-content: flex-start;
}
.footer-block__newsletter {
    flex-grow: unset;
}
}

• And Save.

[nadylina]

Thanks so much, appreciate your help.
Unfortunately it didn't work at all, I replaced your code with the old one (you suggested before) and nothing changed at all. The Social Media Icons were not below Email Signup and the column for quick links which I would like to extend so the links can fit in one row,  didn't change at all.