Change Position of Newsletter Form and Social Icons In Footer on Desktop and Mobile (Dawn Theme)

[DMarquis]

Hi all, I am using the Dawn theme version 12.0.0 and I would like to change the position of the newsletter form and social icons in the footer and ensure that the positioning looks good on both desktop and mobile. Below is an example (not from my site) that shows the positioning I want to achieve on desktop and mobile:

Referring to this post and using this code + this code from that post, I successfully moved the newsletter form and it looks good on desktop. The following image is what my footer looks like on desktop:

Unfortunately, the newsletter form placement doesn’t look good on mobile:

I haven’t attempted to add and reposition the social icons yet. Can someone advise on how to change the position of the newsletter form and social icons in the footer so that they look good on both desktop and mobile? Code and clear instructions on where to put the code would be much appreciated. Thank you in advance for your help!

[BSS-Commerce]

Hi @DMarquis
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[DMarquis]

Hi @BSS-Commerce , thank you so much for your response. I am sending you a dm with the link to my store.

[BSS-Commerce]

Hi @DMarquis

Let’s add css to the end of the base.css file:

@media screen and (max-width: 749px){
    .footer-block--newsletter {
        margin-bottom: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .footer__content-top {
        flex-direction: column;
    }
}

Result:

Hope it helps @DMarquis !

[DMarquis]

Thank you! Thank worked.

[DMarquis]

How do I get the social icons to show up under the signup form on desktop? They show up fine on mobile.