How to edit footer columns in to 2 instead of 1 in Impact Theme

Store Design
,
1

Hi,

How can I split the single column of page links in the footer to 2 columns.

Page: https://pointsstore.com.au/

Pw: dsgshty

tia

2

Hello,

Go to Online store > theme > actions > edit code.

Find assets folder > theme.css file.

At the bottom of the file copy and paste this code:

.v-stack {
  grid-template-columns: 300px 300px;
}

@media screen and (max-width: 600px) {
  .v-stack {
    grid-template-columns: 1fr;
  }
  .footer__block-list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

Result:

dannyelo_0-1690166383873.png
dannyelo_0-1690166383873.png2058×1258 120 KB

Result on mobile:

dannyelo_1-1690166703755.png
dannyelo_1-1690166703755.png1160×1426 97.2 KB

Hope it help!

3

Thank you!

The desktop version is perfect, is it possible to do the same on mobile?

4

quick update: It worked on the footer menu but also changed all the collection pages as well.

Maybe it needs tweaking?

5

Hey!

Try this instead.

.footer__block .v-stack {
  grid-template-columns: 300px 300px;
}

@media screen and (max-width: 600px) {
  .footer__block .v-stack {
    grid-template-columns: 1fr;
  }
  .footer__block-list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

Let me know!