Displaying Footer quick links in Column and not in straight line

Vizionn
New Member
1 0 0

Hi, I'm using Debut theme and want to display the Return policy, Privacy policy, etc, underneath each other as it is right next to each other at the moment.

 

Example:

Quick links

Privacy policy

Return policy

Shipping policy

 

Thanks for the help

0 Likes

Hello 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Jason
Shopify Expert
10360 158 2009

The quick links section on that theme is designed to show all the links in a row, vs in a column. If you need to show it in a column adding this css to the bottom of your stylesheet (theme.scss.liquid) will help:

 

/* force quick links to show one per line */
.site-footer__linklist.list--inline li {
    display: block;
}
I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
JHS
Excursionist
28 0 13

Well that worked for me as well.
May I ask if you have the code for 2 columns instead of one.

I have 7 links.

mijankarim
Shopify Partner
53 13 17
You can try this css code to show links in 2 columns.
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store? hire me.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
If you want to donate me click here (paypal)
Mareka
Trailblazer
209 1 27

Hi,

I am wanting to change the footer on my shop & found this post from last year.  I added the code as you suggested & the menu items listed vertically but in the middle of the page & all out of alignment.  Can you please help.  

0 Likes
Joshubaru
New Member
3 0 0

In case anyone is looking at this in the future, I made a code that centers + puts the quick links in two columns for mobile but has them in one line for desktop.

@media only screen and (max-width: 750px) {
  .site-footer__linklist {
  column-count: 2 ;
  text-align: center;
	}
}

 

0 Likes
Joshubaru
New Member
3 0 0

I noticed with my previous code, it wasn't aligned perfectly centered. Not sure if this was just me or not but here's another code to correct it if you're having the problem as well.

@media only screen and (max-width: 750px) {
  .site-footer__linklist {
  column-count: 2 ;
  text-align: center;
    padding-left:20px;
	}
}
0 Likes
purebo
New Member
1 0 0

Does this still work? I just tried to use it but I had two issues:

1. I couldn't find the (theme.scss.liquid), I instead found the theme.liquid 

2. When I did install it, nothing happened. 

Please help!!

0 Likes
Hsandhu94
Tourist
6 0 2

Has there been someone changes to this? 

I can't find the (theme.scss.liquid) 

0 Likes