CRAFT THEME- Making footer mobile friendly

Store Design
1

Hiya!

I’ve noticed craft theme footer links are not mobile friendly - is there code i can use to organise into 3 columns along the bottom of the footer instead of being stacked as they are currently?

Many thanks!

2 Likes
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi! Thanks for replying i have sent you PM

4

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can add my code as follows: theme → Edit > Search “theme.liquid”. Then paste the code before the tag:

@media (max-width:767px){ .footer__blocks-wrapper{ display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; } .footer__blocks-wrapper > .footer-block.grid__item{ margin-top:0 !important } }

If you find my comment useful, please let me know by giving it a Like. Thank you!

Richard - PageFly

1 Like
5

Hello Richard,

Thanks for your reply it worked wonderfully!

Would you happen to know how to centre the content in the footer on desktop as i’ve optimised the section placement for the footer and now it looks left heavy on the. desktop version?

Or how to display 4 columns on desktop but only 3 on mobile? Something that allows desktop footer to be more filled out than the mobile version?

1 Like
6

Hello @wbyw , I am so happy that the code fixed your problem.

I recommend you can consider using app builder to build different layout and designs on mobile and laptops devices. PageFly - a Free Shopify Landing Page Builder is one of the best page builder app on Shopify. You can easily experience all the functions within the free plan. Above that we are really proud of 24/7 support team. We are happy to help you all the time.

You can check our guide to build a high conversion Homepage and check out some tips for Holiday ideas.
Hope this will be helpful to you!