I WANT TO MAKE MY FOOTER MENUS ALIGNED ON TOP

[TinColens]

Hi. I want to make my Footer menus aligned on top. Can someone help me on this?

[kat_nguyen]

hi @TinColens , could you share a link to the store?

Otherwise you can try:

• https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Co...

[TinColens]

Hi. Here it is:

https://browsxrosi.myshopify.com/

I want it to be like this website in desktop and mobile view:

https://fuzionartistry.com/

[kat_nguyen · Accepted solution]

@TinColensthis should do the trick:

1. Go to "Sales Channels" > "Themes" > [Your theme name]
2. Click the 3 little dots before "Customize" > "Edit Code"
3. click Layout/theme.liquid and scroll to the bottom of the file
4. Paste the following just above the </head>

<style>
@media screen and (max-width: 767px) {
  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    align-items: flex-start !important;
  }
}
</style>

[TinColens]

Hi, again. It worked and aligned the menus on top. But, it still looks like these on desktop and mobile view:

[kat_nguyen]

Give this a try:

<style>
@media screen and (max-width: 767px) {
  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    align-items: flex-start !important;
  }
  .footer__blocks-wrapper {
    flex-wrap: wrap !important;
  }
  .footer__blocks-wrapper > .footer-block:not(.footer-block--menu) {
    width: 100% !important;
  }
}
</style>

[TinColens]

Hi. What I mean was I want to add a clickable logo and details. It will look like this in desktop view:

and this when in mobile view: