Solved

How can I fit all footer menu links on the same line?

GildedSocial
Shopify Partner
66 0 11

Hello,

 

I have my site https://vintage-breaks-1201.myshopify.com/ which is not live at the moment (PW: liareu)

 

I have 5 sections or links in my footer that I want on the same line. There is more than enough space there, but it drops off and goes to two lines.

 

Capture.PNG

 

Wondering how: Sports, Break Types, My Account, My Cart and Contact can all fit on the same line.

Thanks,

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6430 1543 1912

This is an accepted solution.

Hi @GildedSocial 

Try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet.scroll-trigger.animate--slide-in {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.grid--1-col .grid__item {
    max-width: 100% !important;
    width: 100% !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1694186297077.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 15 (15)

Made4uo-Ribe
Shopify Partner
6430 1543 1912

This is an accepted solution.

Hi @GildedSocial 

Try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet.scroll-trigger.animate--slide-in {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.grid--1-col .grid__item {
    max-width: 100% !important;
    width: 100% !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1694186297077.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
GildedSocial
Shopify Partner
66 0 11

Perfect! Thank you

Andy106
Pathfinder
111 7 29

@Made4uo-Ribe 
Still for footer, how can I have the first section by its self on the first line and the rest sections divided equally on the following line. Something like the picture below:

Andy106_0-1702173585080.png

 

likidesigns
Tourist
6 0 0

Oh thank you I was looking for the answer to that same question, so I copy and pasted the code, and it worked great on desktop, but what about a way to just modify the desktop version but not the cellphone version? thank you so much in advance!

 

Made4uo-Ribe
Shopify Partner
6430 1543 1912

Hi @likidesigns 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
likidesigns
Tourist
6 0 0

thank you so much. www.likidesigns.com

I want one row for desktop footer only, but when I insert the above code it also applies it to the mobile version.

Thank you so much!

Made4uo-Ribe
Shopify Partner
6430 1543 1912

Thanks for the info, check this one.Same instruction. 

 

@media only screen and (min-width: 750px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet.scroll-trigger.animate--slide-in {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.grid--1-col .grid__item {
    max-width: 100% !important;
    width: 100% !important;
}
}

 

And Save. 

Do you like to center align on the mobile also? If it is, paste this one next. 

 

@media only screen and (max-width: 749px){
.footer-block.grid__item {
    text-align: center;
}
.footer-block__details-content .list-menu__item--link {
    justify-content: center;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1716063144205.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
likidesigns
Tourist
6 0 0

@Made4uo-Ribe this works perfect! thank you so much 😊

I liked the post but how do I mark solution? sorry it's my first time posting or asking a question directly to the Shopify Community.

likidesigns
Tourist
6 0 0

@Made4uo-Ribe I just realized that unfortunately the code provided also affects the pictures on my products. All the pictures related to products are shown on their regular size, rather than the option selected for my desktop layout thumbnails carousel.

How can I accomplish the one row on the desktop footer menu and the centered footer menu on mobile without affecting the product pictures? Thank you!

likidesigns
Tourist
6 0 0

Screenshot 2024-05-18 at 6.43.00 PM.png

Screenshot 2024-05-18 at 6.43.35 PM.png

  

Made4uo-Ribe
Shopify Partner
6430 1543 1912

Oh, sorry about that. I just copy the previous code I give to other store. It means it doesnt work in your store check this one then. 

 

@media only screen and (min-width: 750px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
.footer-block.grid__item.footer-block--menu {
    max-width: 100% !important;
    width: 100% !important;
}
}

 

Replace the first code that I give. 

But for the code in the mobile center, it is good right? 

You can only give some likes to my post, cause the one who can mark solution is the one who make this topic. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
likidesigns
Tourist
6 0 0

@Made4uo-Ribe thank you so much!!! it's working now. I appreciate it a lot 🙂

Made4uo-Ribe
Shopify Partner
6430 1543 1912

Your welcome, Sorry for late reply. I know youve been frusted of waiting and finding solution. Thank you for tips!😊

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

hassanlala
Visitor
1 0 0

I also want on my store but facing same issue and do not know how to do. Volleyball players are my audience and looking to target through shopify.

ryanfisher3011
Visitor
1 0 0

I am also facing the same issue in my site footer kindly someone help me to solve this issue.