Re: Footer sections ordered vertically Dawn theme

Solved

Footer sections ordered vertically Dawn theme

gutt1992
Visitor
2 1 0

Hey guys, 

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

By default those are ordered horizontally: 

Zrzut ekranu 2024-05-07 122540.png

 

But I would like them to be ordered vertically: 

Zrzut ekranu 2024-05-07 121503.png

Is there a simple way to accomplish this?
Thanks 🙂

All Best
Gustaw Beźnicki
Accepted Solutions (2)

BSSCommerce-HDL
Shopify Partner
1131 389 457

This is an accepted solution.

Hi @gutt1992 

 

You can do the following steps:

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

 

BssTechVenture_0-1715153314130.png

 

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!

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

gutt1992
Visitor
2 1 0

This is an 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: 
Zrzut ekranu 2024-05-08 130133.pngZrzut ekranu 2024-05-08 130430.png

Thank you all for help!!

All Best
Gustaw Beźnicki

View solution in original post

Replies 3 (3)

Atanu_Sarkar
Shopify Partner
10 3 3

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
Shopify Partner
1131 389 457

This is an accepted solution.

Hi @gutt1992 

 

You can do the following steps:

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

 

BssTechVenture_0-1715153314130.png

 

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!

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
gutt1992
Visitor
2 1 0

This is an 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: 
Zrzut ekranu 2024-05-08 130133.pngZrzut ekranu 2024-05-08 130430.png

Thank you all for help!!

All Best
Gustaw Beźnicki