How can i rearrange my footer so it is all in the same line?

[Motoblox]

My footer looks like this right now-

There is too much space between the sections, is there any way to make them compact and look like this instead-

Following is also fine since i have more menu’s-

[rajweb]

Hey @Motoblox ,

It seems you’re looking to reduce the space between sections in your footer to make it more compact. However, I can’t see the actual footer layout you’re describing. If you could either share the layout or give a more detailed description of how your footer is currently structured, I can provide you with some code suggestions to compact the sections.

Generally, reducing the space between footer sections involves adjusting the padding or margins of the elements in the footer. You can usually achieve this by customizing the CSS in your theme.

Here are some general tips for compacting footer sections:

1. Inspect the Padding/Margin: Use the browser’s developer tools (right-click on the page and select “Inspect”) to find out which elements have excessive padding or margin. You can then target those elements and reduce the padding/margin.

2. CSS Code Example: If you know the class or ID of the footer sections, you can add custom CSS in your theme’s settings under Online Store > Themes > Customize > Additional CSS:

.footer-section {
  margin-bottom: 10px; /* Adjust to your preference */
  padding: 10px 0; /* Adjust top/bottom padding */
}

• Adjusting Footer Widgets: If your footer has widgets or columns, reducing the width and margins for each widget can also help. For example:

.footer-widget {
  margin-right: 10px;
  padding: 5px;
}

• If you could provide a URL and clarify your layout preferences, I can offer a more specific solution tailored to your needs.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Mehran_Ali]

Hi @Motoblox

This can easily be done using both CSS and Liquid modification

Kindly share your store URL and password if it password protected

[Motoblox]

https://motoblox.com/

I just wanna remove the empty space and have all quick links in one line

[Motoblox]

https://motoblox.com/

[rajweb]

@Motoblox ,

To compact your footer and bring the “Quick Links” or similar menu items into a single line, you can make the following adjustments in your CSS:

1. Reduce Padding and Margins: Remove or reduce the padding and margins around each footer element. This will help reduce the space between sections.

2. Adjust Grid Layout: Instead of multiple columns for each footer block, you can try a flexbox or grid layout to align all the items in one row.

3. Here’s an example of CSS that you could add to your theme’s CSS file to make these adjustments:

.footer__blocks-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Space between elements */
  gap: 10px; /* Space between sections */
}

.footer-block--menu, .footer-block--newsletter, .footer-block {
  flex: 1 1 20%; /* Adjust percentage to fit your needs */
  margin: 0;
  padding: 0;
}

.footer-block__details-content {
  display: flex;
  flex-direction: row;
  gap: 10px; /* Adjust spacing between menu items */
  flex-wrap: wrap;
}

.footer-block__heading {
  font-size: 1.1em; /* Adjust size as needed */
  margin-bottom: 5px;
}

.list-unstyled {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Space between links */
}

This should help compact your footer links into a single line and eliminate excess spacing. Adjust the percentages and gap values as needed for your specific design requirements.

Thanks

[Motoblox]

thanks for all the help but i don’t know how to do this

[rajweb]

@Motoblox Could you please message me via email so we can discuss the details further? I’d be happy to help!

[Mehran_Ali]

Hi @Motoblox

You just need to follow these steps:

1. Go to the Online Store
2. Edit Code
3. Find theme.css / base.css

And past that CSS Code:

.footer__blocks-wrapper { display: grid; grid-template-columns: repeat(7, 1fr); }
.footer__blocks-wrapper .footer-block--newsletter { grid-column: 1/ span 2; }
.footer__blocks-wrapper .footer-block:nth-child(2) { grid-column: 3; }
.footer__blocks-wrapper .footer-block:nth-child(3) { grid-column: 4; }
.footer__blocks-wrapper .footer-block:nth-child(4) { grid-column: 5; }
.footer__blocks-wrapper .footer-block { width: 100%; }
.footer__blocks-wrapper .footer-block:nth-child(5) { grid-column: 6/ span 7; }
.footer__content-top { padding-bottom: 5px; }
.footer__content-bottom { padding-top: 10px; }
.footer { padding-block: 70px; }

This Will be the result:

I hope this solution works for you!

If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!