How can i move my newletter sign up to the bottom of the page on mobile view

[jordan24640]

I included the picture of my shopify site's newsletter and a picture of what i want my newletter sign up to look like. 

[lytechxdigital]

Hi Jordan,

It can be done by adding responsive CSS. Both ".footer-block--newsletter" and ".footer__blocks-wrappe" will be 100% responsive. 

[Huptech-Web · Accepted solution]

Hello! @jordan24640 Please follow these steps to add this CSS code

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (max-width: 767px){
.footer__content-top .footer__blocks-wrapper, .footer__content-top .footer-block--newsletter, .footer__content-top .footer-block.grid__item {
    width: 100% !important;
max-width: 100% !important;
}
    .footer__content-top .footer-block.grid__item {
        margin: 0 !important;
    }
}

 Output:

Thank you

D.P.

[jordan24640]

Thank you that worked. Can you help with adjusting my newsletter on desktop view to be wider so that it shows 2 lines of words and also have the social media icons to be under the newsletter. currently it looks like this 

[Vinsinfo]

@jordan24640 Please follow below steps to move the newsletter to bottom on mobile view. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "section-footer.css" file.

4. Paste the below code at the bottom of the file and save changes.

.footer-block--newsletter {
    flex-direction:column;
}
.footer-block--newsletter .footer-block.grid__item {
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    .footer__content-top.page-width {
        display: flex;
        flex-direction: column;
    }
    .footer-block--newsletter {
        width: 100%;
    }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.