Solved

How to make footer links horizontal

Ducan03
Excursionist
31 0 13

Hi, I need help making my footer links horizontal on debut theme mobile mode.

It currently looks like this

20210805_133227.jpg

 but I want it to look like this

20210805_132900.jpg

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@Ducan03 

Please try this code 

@media only screen and (max-width: 749px){
.site-footer__item--one-half {
    -webkit-flex: 1 1 50% !important;
    -moz-flex: 1 1 50% !important;
    -ms-flex: 1 1 50% !important;
    flex: 1 1 50% !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 9 (9)

dmwwebartisan
Shopify Partner
12282 2546 3694

@Ducan03 

Please share shop Url!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ducan03
Excursionist
31 0 13

Sent it to your inbox

dmwwebartisan
Shopify Partner
12282 2546 3694

@Ducan03 

 please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. 

.site-footer__linklist.list--inline {
    padding: 0;
    margin: 0;
    display: grid !important;
}

 Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12282 2546 3694

@Ducan03 

For mobile 

@media only screen and (max-width: 750px){
.site-footer__item--one-half {
    -webkit-flex: 1 1 100% !important;
    -moz-flex: 1 1 100% !important;
    -ms-flex: 1 1 100% !important;
    flex: 1 1 100% !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ducan03
Excursionist
31 0 13

It didn't work in mobile mode, just in tablet mode

dmwwebartisan
Shopify Partner
12282 2546 3694

@Ducan03 

what do you want on mobile !

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ducan03
Excursionist
31 0 13

The same thing with the tablet mode, horizontal. The code for some reason didn't work for mobile

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@Ducan03 

Please try this code 

@media only screen and (max-width: 749px){
.site-footer__item--one-half {
    -webkit-flex: 1 1 50% !important;
    -moz-flex: 1 1 50% !important;
    -ms-flex: 1 1 50% !important;
    flex: 1 1 50% !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ducan03
Excursionist
31 0 13

Worked perfectly,  thanks!