How to make footer sit side by side

[veluxe1]

Hi everyone, i wanna make my footer section sit side by side for the desktop view.

Theme : Horizon

Store Url : https://ibakedesserts.myshopify.com/

pass : ibakedesserts

Below is the image of current footer, i want to move everything in Info to sit beside the explore and the height section is auto

[Gimmesales]

(post deleted by author)

[Mustafa_Ali]

Hey @veluxe1 try this by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 750px) {
  .section.section--page-width.color-scheme-0a8454cc-69a5-426b-8fb0-6c02632066ab {
    height: auto !important;
  }

  .section.section--page-width.color-scheme-0a8454cc-69a5-426b-8fb0-6c02632066ab .footer__content-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 2rem !important;
  }

  .section.section--page-width.color-scheme-0a8454cc-69a5-426b-8fb0-6c02632066ab .footer-block {
    flex: 1 !important;
    min-width: 200px !important;
    width: auto !important;
  }
}
</style>

[Laza_Binaery]

Hi @veluxe1

You need to add another footer section in the Footer area and then add menu blocks like on image

[veluxe1]

It doesn’t work sir

could you please try and screenshot the result

[liquidshop.co]

You are using two separate sections for footer instead of using two separate sections for your footer, just use a single custom section with a two-column row layout. Add one group block for “Explore” and another for “Info” side by side within that one section. The Horizon theme supports this natively so no CSS workarounds needed and it will sit properly on desktop.

[Laza_Binaery]

@Gimmesales

Please stop with AI-generated responses. You could spent 15 seconds checking that there is just base.css, not theme.css and that code AI suggested does nothing in this case.

@Mustafa_Ali

That code also does not work, as you targeted just one section, and the second is just below. Plus, targeting by generated section ID is not recommended as user can change the section and then the code does not work anymore. Custom CSS section is recommended.

[liquidshop.co]

Yeah both responses are AI generated and they even did not look the site for its structure and layout.

[veluxe1]

But the content must be taken directly from menu right? Because right now my footer content is not directly from menu, it’s just text with added link to pages and policies.

[Maximus3]

You created entirely different sections, so of course they are stacked on top of each other:

What you ought to do is add Group block, then add blocks within those groups:

You don’t need code, you just need to understand how Horizon structure works.

[liquidshop.co]

Horizon doesn’t have a built in option to pull footer links from a menu in custom sections. So you have to do the same thing again but in single section with two block layout.

[veluxe1]

Thankyou so much, i already find out how it works