I am wanting to but my subscribe button and social media icons on the same block as the rest of my footer. I attached a photo for reference.
website - www.evrenclothing.com
password - chewno
hi @isaacdob
You should try following the instructions below
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file section-footer.css and add this code snippet to the end of the file
.footer__content-bottom-wrapper {
align-items: center !important;
}
.footer__content-bottom-wrapper .footer__column.footer__localization.isolate{
max-width: 20% !important;
}
.footer__content-bottom-wrapper .footer-block--newsletter{
flex: 1 !important;
margin: 0 !important;
}
.footer__content-bottom-wrapper .footer__column.footer__column--info {
flex: 1 !important;
max-width: 35%;
}
.footer__content-top.page-width{
display: none !important;
}
.footer__content-bottom {
border-color: transparent !important;
}
Step 3: Search for the file theme.js or global.js and add this code snippet to the end of the file
(() => {
document.addEventListener("DOMContentLoaded", function() {
const footerLocalization = document.querySelector('.footer__column.footer__localization.isolate');
const newsletterBlock = document.querySelector('.footer-block--newsletter');
if (footerLocalization && newsletterBlock) {
footerLocalization.parentNode.insertBefore(newsletterBlock, footerLocalization.nextSibling);
}
});
})();
Result
If it’s helpful, please like and mark it as a solution, thank you
Wow thanks so much. Is there any way to make it the same size as the currency box as well the same font?
And could you let me know how to fix the issues on mobile?
Thanks 
Hi @isaacdob
To modify the style to resemble a currency box and address the issue on mobile, follow these steps to adjust the CSS as follows
@media screen and(min-width: 900px) {
.footer__content-bottom-wrapper {
align-items: center !important;
}
.footer__content-bottom-wrapper .footer__column.footer__localization.isolate{
max-width: 20% !important;
}
.footer__content-bottom-wrapper .footer-block--newsletter{
flex: 1 !important;
margin: 0 !important;
}
.footer__content-bottom-wrapper .footer__column.footer__column--info {
flex: 1 !important;
max-width: 35%;
}
.footer__content-top.page-width{
display: none !important;
}
.footer__content-bottom {
border-color: transparent !important;
}
}
.footer-block__heading.inline-richtext {
font-size: 1.3rem;
line-height: calc(1 + .5 / var(--font-body-scale));
letter-spacing: .04rem;
margin-bottom: 11px;
color: #121212bf;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
text-align: left;
margin-left: 11px;
}
#ContactFooter input[id^='NewsletterForm'] {
max-width: 167px;
max-height: 46px;
}
@media screen and(max-width: 900px) {
.footer-block--newsletter {
margin-top: 0 !important;
}
.field:has(>input[id^='NewsletterForm']){
margin: 11px 11px 5.5px;
}
}
Result
Desktop
Mobile
If it’s helpful, please like and mark it as a solution, thank you
@BSSCommerce-B2B Wow. Thank you so much for your help. I am impressed with your skills.
Is there code to move the payment options just a tad lower to be on the same height as the buttons? Thanks again.
@BSSCommerce-B2B Also for some reason on mobile it still looks the same. I added the code to the bottom of my section-footer.css
Hi @isaacdob
Is there code to move the payment options just a tad lower to be on the same height as the buttons?
Add the following CSS
.footer__payment .list.list-payment {
margin-top: 10px;
}
Result
Regarding the mobile issue, I noticed that it seems you missed some CSS. Please pay attention to the first line
@media screen and(min-width: 900px) {
This indicates that the CSS inside will only apply to screens wider than 900px. Please adjust the CSS as shown above.
Remember, there’s also a ‘}’ at the very bottom to close the above media block. Hope you can resolve the issue ^-^
@BSSCommerce-B2B Would you be able to look at my code and tell me my error? I have everything the same as your yet it still doesnt work. Thank you.