Horizontal footer in Prestige theme

[Arter]

Hi,

I am using prestige theme and i want my footer to look like this.

The links in the footer on my website now are vertical underneath each other, how can i make it horizontal like this?

Also, how can i change the button for the newsletter to be on the right of the bar. And the text for the newsletter to be inside the bar.

Store: arterclo.com

Pass: yaifra

Prestige Theme

Thanks

[Moeed]

Hey @Arter 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Arter]

Hi, thanks for your reply

Store: arterclo.com

Pass: yaifra

[namphan]

Hi @Arter,

I checked your footer and you are wanting something like this:

Please let me know, I will check it.

[Arter]

Hi Namphan,

Yes that is exactly what i am looking for!

[namphan]

Hi @Arter,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.footer__block-list {
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
}
.footer__block--newsletter {
  max-width: none;
  width: 100%;
  flex-basis: auto;
}
.footer__block--newsletter .form {
  display: flex;
  max-width: 500px;
}
.footer__block--newsletter .form-control {
  width: 100%;
}
.footer__block--newsletter .align-self-start {
  height: 100%;
}
.footer__block--newsletter .align-self-start .button {
  height: 100%;
}
.footer__block--links {
  max-width: none;
  width: 100%;
}
.footer__block--links ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 700px) {
  .footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

[Made4uo-Ribe · Accepted solution]

Hi @Arter 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 700px){
.footer__block-list {
    justify-content: center;
    flex-direction: column;
    column-gap: 0;
    gap:2rem;
}

.footer__block--newsletter {
    max-width: 100%;
    flex-basis: unset;
}

.footer__block.footer__block--newsletter form {
    display: flex;
    width: 100%;
}

.footer__block.footer__block--newsletter form button.button {
    background: white;
    color: black;
}

.footer__block.footer__block--newsletter form input {
    line-height: normal;
}

.footer__block.footer__block--links {
        max-width: 100%;
}

.footer__block.footer__block--links ul.v-stack.gap-2\.5.unstyled-list {
    display: flex;
    gap: 2rem;
}
}
</style>

• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!