How To Put Image Above Text In Footer

[TimMarner]

Can anyone help me - I'm trying to get an image to stack on top of text in my footer, but there is no image with text block. 

This is what I want it to look like.....

But this is what the footer currently looks like...

 

How do I get the block on the bottom to move up and fill the blank space?

Thanks for any help 

[vinh0225]

Hi @TimMarner 
Could you please share the store URL so that I can investigate further?

Regards,

Vinh

[TimMarner]

https://freazesweets.myshopify.com/ 

Password: freaze

Thank you

[vinh0225 · Accepted solution]

Hi @TimMarner 

Please follow these steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file layout/theme.liquid and add the following snippet before </body>.

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const footerItems = document.querySelectorAll('.footer-item');
    if (footerItems.length == 5) {
        const fifthFooterItem = footerItems[4];
        const firstFooterItem = footerItems[0];
        fifthFooterItem.parentNode.removeChild(fifthFooterItem);
        firstFooterItem.appendChild(fifthFooterItem);
    }
  }
});
</script>

4. Save the file and test.

That's it. Please let me know if you have any concern.

Regards,

Vinh

[TimMarner]

That's worked thanks so much!

[marinaevans]

Hello, I have tried using the solution above and am still finding there's a LOT of vertical space between the logo image block & the text block I would like to appear directly beneath it. How do I reduce this space (in red in screenshot)? Thanks in advance!

[Made4uo-Ribe]

Hi @TimMarner 

Would you mind to share this store URL? Thanks!

[TimMarner]

Hi this is the link:

https://freazesweets.myshopify.com/ 

Password: freaze

Thank you

[Made4uo-Ribe]

Thanks for the info, check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 1023px) {
    .grid.grid--layout.grid--gap-xlarge.grid-4.grid-portable-2.grid-lap-1 {
        grid-row-gap: 0;
    }
    .footer-top > div > div:nth-child(1) {
        grid-row: 1 / span 1;
        grid-column: 1;
    }
    .footer-top > div > div:nth-child(5) {
        grid-row: 1 / span 2;
        grid-column: 1;
    }
    .footer-item__content.rte {
        padding-top: 50px;
}
}

And Save. 

Result:

This is only on the desktopn scree on the tablet and mobile, you didnt mention about it.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!