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

[GildedSocial]

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.

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

Thanks,

[Made4uo-Ribe · 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:
• 

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

[GildedSocial]

Perfect! Thank you

[Andy106]

@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:

[likidesigns]

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]

Hi @likidesigns 

Would you mind to share your store URL? Thanks!

[likidesigns]

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]

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:

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

[likidesigns]

@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]

@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]

  

[Made4uo-Ribe]

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!

[likidesigns]

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

[Made4uo-Ribe]

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

[hassanlala]

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]

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