Shopify Dawn Theme Footer Placement

Store Design
, , ,
1

Hi,

I want to organize my footer for both desktop and mobile in these ways. I’m using three blocks for my footer, two menu blocks and one text block

Desktop:

Desktop1.png
Desktop1.png1898×1249 60.2 KB

Mobile:

Mobile1.png
Mobile1.png1334×645 40.1 KB

Any help would be greatly appreciated. Thank you!

2

Hi @jjtan1996

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

image (20).png
image (20).png350×665 21.1 KB

image (19).png
image (19).png1088×782 27.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi,

I don’t see the code.

Thank you!

4

Hi @jjtan1996

Sorry for this delay in getting back to you. Here is the code I mentioned in the previous message:

.footer__blocks-wrapper.grid > .footer-block.grid__item * {
    text-align: center !important;
    margin-inline: 0 !important;
}
@media screen and (max-width: 768px){
.footer__blocks-wrapper.grid > .footer-block.grid__item * {
    text-align: center !important;
    margin-inline: 0 !important;
    justify-content: center !important;
}
.footer__content-top.page-width {
    padding-inline: 0 !important;
}
.footer__content-top.page-width > .footer__blocks-wrapper.grid {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
}
.footer__content-top.page-width > .footer__blocks-wrapper.grid > .footer-block.grid__item:nth-child(1), .footer__content-top.page-width > .footer__blocks-wrapper.grid > .footer-block.grid__item:nth-child(2) {
    width: 50% !important;
    flex: 1 1 45% !important;
}
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team