Clean up footer in prestige theme

Store Design
, , , , , , ,
1

Hi Again,

I am trying to clean up my Footer so it’s not all staggered with different heights when viewed on desktop. Is there a way I can just have each individual columns? Or alternate suggestions?

http://is-salon-yaletown.myshopify.com

2

Hi @isSalon

The footer on your website looks a bit off. You could try shortening the menus, categorizing them, and breaking them into three different menus—that would help improve the layout.

Alternatively, I’ve tried to address this using CSS. You can add the following CSS to your base.css file in the code editor.

.Footer__Inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.Footer__Inner .Footer__Block:nth-child(3) {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.Footer__Inner .Footer__Block:nth-child(3) ul.Linklist {
    display: flex;
    flex-wrap: wrap;
    column-gap: 19px;
}

.Footer__Inner .Footer__Block:nth-child(3) ul.Linklist li.Linklist__Item {
    width: 48%;
}

.Footer__Inner .Footer__Block {
    margin: 0;
    padding-inline: 10px;
}

.Footer__Inner .Footer__Block:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.Footer__Inner .Footer__Block:nth-child(2) {
    grid-column: 6;
}

.Footer__Inner .Footer__Block:nth-child(4) {
    grid-column: 5 / span 1;
    grid-row: 1;
}

This Css make footer look like this

Mehran_Ali_0-1723654595285.png
Mehran_Ali_0-1723654595285.png1900×586 72 KB

But doing this using CSS is not a preferred way so if you need any help doing it without CSS I can help you out kindly Contact me

3

this worked for desktop, but not mobile version.