How to Stack Newsletter Input Field and Button on Mobile

[bossbabecreativ]

Hi, I am trying to figure out how to stack the newsletter input field and button on top of each other on the mobile view of my footer. I am using the Minimal theme.

I’d also like to add a little more spacing between my footer sections on mobile as well.

Currently it looks like this

url: poshd-nails.myshopify.com

pw: poshdforever1

Thank you in advance!

[eFoli-Marvic]

Hello @bossbabecreativ

To Stack Newsletter Input Field and Button on Mobile, add this code to your theme.scss.liquid or timber.scss.liquid file.

Navigate to online store >> Click edit theme code.

Now find theme.scss.liquid or timber.scss.liquid and paste the following code

@media (max-width:700px){
#shopify-section-footer{position:relative !important;}
#shopify-section-footer .post-large--hide
{
position: absolute !important;
top: 26px !important;
width: 91% !important;}
}

After adding the CSS you see the changes.

I hope it will be helpful for you.

Thanks

Did it solve your issue?

• If yes, Like & Mark As Solution to help the community

• If not, let me know. also share a screenshot of the code that you added.

[bossbabecreativ]

Thanks for your reply! Unfortunately, that didn’t work. It just moved the input field and button up to the very top of my footer.

[eFoli-Marvic]

@bossbabecreativ Please share the screenshot with an indication of where do you want to show the subscribe field?

[bossbabecreativ]

Sorry sure, so I want to keep the same order of my footer sections, but I just want to stack the newsletter email input field on top of the button (instead of side by side like it is currently).

Like this:

[eFoli-Marvic]

@bossbabecreativ Please remove the previous code and paste the following code to theme.scss file.

@media (max-width:700px){
#shopify-section-footer .input-group{width:100% !important;}
   .input-group-btn {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;}

  .input-group-btn button{
        width: 100% !important;
        padding: 17px 0 35px 0 !important;}
}

Did it solve your issue?

• If yes, Like & Mark As Solution to help the community

• If not, let me know. also share a screenshot of the code that you added.

[bossbabecreativ]

Thank you, that worked! Is there a way to also adjust the newsletter width so that it lines up with my footer contact email (see pic)?

I’d also like to add a little more space between the newsletter button and the copyright text if possible.

Thank you so much!!