Help customizing Jumpstart Theme footer

Solved
New Member
2 0 0

Hello, I have finished setting up and designing my store but of all things I have struggle editing my footer design... right now is a bunch of messy links randomly placed (on mobile), and i don't know why can't I edit or modify them.. I have little to no knowledge of coding, so a simple explanation would be perfect! My store is my4bottle.com and my concept for a footer would be having my links at least ordered in columns.. anyone have a clue on how to do this? Thx 

0 Likes

Success.

Shopify Staff
Shopify Staff
723 40 103

Hi, @4bottle !

 

Katy here from Shopify. I hope all is well with you, and welcome to our Community here!

 

Thanks so much for sharing a link to your store, this is very helpful. I have taken a look, and the following code below should do the trick for you:

 

07-54-7c9yp-15qge

 

To set this up, we will need to edit your theme's Custom Style Sheet (CSS). This cannot be rolled back, unlike your theme's templates, so it's always recommended to test this out in a duplicate version of your theme first.

 

Once you have this created, if you could then navigate to your theme > actions > edit code> theme.scss.liquid. At the very bottom of this file, if you could then paste the following Media Queries:

 

.site-footer .link-list{ 
  @include at-query($max, $small) {
    display: flex;
    flex-direction: column;
   }
}

.site-footer .a.footer-link{
  @include at-query($max, $small) {
    padding:2px;
   }
}

.site-footer .link-list a {
  @include at-query($max, $small) {
    margin: 10px 15px;
  }
}

 
The first Media Query here uses the flex property to arrange these menu items in a column format, it instructs the code to make this change on medium and small screen sizes only. While the subsequent Media Queries adjust the padding and margins, both between and around each link list item. There is some info on how this works works here  and also here  if you would like to have a look.


Do let me know how you get on with this, or if you need a hand at all. Also, fantastic work on your store - it is looking great! 

 

Cheers,
Katy

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
2 0 0

I can't thank you enough!! You solved a problem I had going for like a month or so..

Thx for the time u took answering to me!

0 Likes
Shopify Staff
Shopify Staff
723 40 103

Aw you're very welcome, @4bottle !

 

I'm so glad to hear that it has helped, and wishing you the very best with your store!

 

Cheers,

Katy

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes