Footer email

[kayodekevin]

Hi, all! I would please some help. I would like to move the email sign up form to the right side of the footer column on desktop only to be in line with the columns rather than underneath. I had a reply to add some code to my base.css file but that didn't work for me. would appreciate some help with this please!
the site url is: https://rz591a-jx.myshopify.com/#
and password is thuflo

[websensepro]

Hi @kayodekevin 
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.

@media screen and (min-width: 750px) {
    .newsletter-form {
        align-items: unset !important;
        margin: unset !important;  
    }
.footer-block__newsletter {
    display: flex;
    width: 100%;
    justify-content: end;
    align-items: center;
    gap: 30px;
    text-align: unset !important;
    flex-grow: unset !important;
}
.footer-block__newsletter h2.footer-block__heading.inline-richtext {
    margin-bottom: 0 !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[kayodekevin]

Hi, thank you for your reply! I would please like it to be at top right next to the helpful links column so that they are all inline

[websensepro]

@kayodekevin 

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.

@media(min-width:750px){
.footer__content-top.page-width {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    width: 69%;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin-top: 0pc !important;
    width: 28%;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[kayodekevin]

Hi, thank you for your response. I have added it to base css but for some reason it still doesn't show up, do you know what the problem could be?

[websensepro · Accepted solution]

@kayodekevin 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media(min-width:750px){
.footer__content-top.page-width {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    width: 100%;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    width: 69%;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin-top: 0pc !important;
    width: 28%;
}
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[kayodekevin]

Perfect, it worked! Thank you for your help today!