How can I center align my Dawn theme footer only on desktop version?

[Quincko]

Hello,

i need some help with my Shop. I am using the Dawn Theme and i would like to get “Shop” and “Allgemeines” and the subpoints alligned to the center - but only on the desktop version. Adding to that i would like to have the “Newsletter” and the associated text in the middle of the page and the social media links beneath that.

Thanks and best Regards

Quincko

[GemPages]

Hello @Quincko ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @Quincko

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.

[Quincko]

Here is the link: https://quincko.de

Password is Keba

[GemPages]

Hi @Quincko ,

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @Quincko

We would like to suggest you a solution below:

1. Please go to Theme => Edit Code:

2. Go to global.js and add this code at the end of the file:

if (window.innerWidth > 750) {
const elementBefore = document.querySelector("#shopify-section-footer > footer > div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet > div:nth-child(3)")

const elements = document.querySelector(".footer__content-top.page-width")

elements.insertBefore(elementBefore , elements.children[0]);
}

3. Find the file base.css and add this code:

@media screen and (min-width: 750px) {
.footer .footer__content-top.page-width {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__blocks-wrapper div:first-child {
 margin-right: 250px;
}

.footer .footer-block--newsletter {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-block--newsletter .footer-block__newsletter {
    display: flex;
}

}

• Here is the result:

I hope that it will work for you.

[Quincko]

It worked @GemPages . Only thing that is missing is to get the Social Media links and the Newsletter aligned to the center.

[Quincko]

@GemPages thank you so much for your effort but we decided to go with the solution from @BSS-Commerce .