Footer sections ordered vertically Dawn theme

[gutt1992]

Hey guys, 

I'm having trouble ordering my footer section in Dawn theme. 

By default those are ordered horizontally: 

But I would like them to be ordered vertically: 

Is there a simple way to accomplish this?
Thanks 🙂

[BSSCommerce-HDL · Accepted solution]

Hi @gutt1992 

You can do the following steps:

Step 1: Go to Online Store => select Edit code

Step 2: Find the base.css file in the Assets folder and add the following code at the end of the file

.footer__content-top .footer__blocks-wrapper, .footer-block--menu .footer-block__details-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__content-top .footer__blocks-wrapper {
  flex-direction: column;
}

.footer-block.grid__item {
  width: 100%;
  text-align: center;
}

In case you have completed the above steps and the problem is still not resolved, you can provide a store link so I can support you more effectively.

Hope this will help!

[Atanu_Sarkar]

Hi @gutt1992,

Please add the following CSS code to the bottom of your base.css file:

.footer__content-top .grid {
    display: block;
}
.footer__content-top .grid .footer-block.grid__item {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 25px;
}
.footer__content-top .grid .footer-block.grid__item .footer-block__details-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}
.footer__content-top .grid .footer-block.grid__item:last-child {
    margin-bottom: 0;
}
.footer-block__details-content>li {
    margin: 0 !important;
}
.footer-block__details-content>:first-child .list-menu__item--link {
    padding: 0;
}
.footer-block__details-content .list-menu__item--link {
    padding: 0;
}

You can access the base.css file by following these steps:

1. Navigate to "Themes" in your Shopify dashboard.
2. Click on "Edit code" for your current theme.
3. Locate the base.css file under the "Assets" folder.

Once you've added the CSS code, save your changes, and the footer elements will be aligned to center. If you need further assistance, feel free to reach out.

Thanks.

[BSSCommerce-HDL · Accepted solution]

Hi @gutt1992 

You can do the following steps:

Step 1: Go to Online Store => select Edit code

Step 2: Find the base.css file in the Assets folder and add the following code at the end of the file

.footer__content-top .footer__blocks-wrapper, .footer-block--menu .footer-block__details-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__content-top .footer__blocks-wrapper {
  flex-direction: column;
}

.footer-block.grid__item {
  width: 100%;
  text-align: center;
}

In case you have completed the above steps and the problem is still not resolved, you can provide a store link so I can support you more effectively.

Hope this will help!

[gutt1992 · Accepted solution]

Final solution was what @BSSCommerce-HDL suggested and some additional code covering smaller screens: 

.footer__content-top .footer__blocks-wrapper,
.footer-block--menu .footer-block__details-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__content-top .footer__blocks-wrapper {
  flex-direction: column;
}

.footer-block.grid__item {
  width: 100%;
  text-align: center;
}

.footer-block__brand-info {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-block__details-content > :first-child .list-menu__item--link {
  padding-top: 1rem !important;
}

@media screen and (max-width: 749px) {
  .footer-block__details-content {
    margin-bottom: 4rem;
    display: inline-block !important;
  }
}

And the results: 

Thank you all for help!!