Make footer 1 row instead of 2

[ameye27]

Hello,

I would like to make my footer 1 row instead of 2 but can't figure out a way to combine them or align them. How can I make this possible? Thanks! Attached is my current site and a mockup of how I would like my footer to look. I'm on the Dawn theme

  

[Mehran_Ali · Accepted solution]

Hi @ameye27 

In your theme -> code-editor -> find base.css in search 
Past that CSS Code

footer { display: flex; align-items: center; flex-direction: row-reverse; }
.footer .footer__content-top { padding: 0; width: 50%; }
.footer .footer__content-top .footer-block {width: 100%;max-width: 100%;padding: 0 5rem;}
.footer .footer__content-top .footer-block ul { text-align: right; }
.footer .footer__content-bottom { padding: 0; width: 50%; border: 0; }
.footer .footer__content-bottom .footer__content-bottom-wrapper { justify-content: flex-start; }

If this Answer work kindly Like  and Mark This As Solution

If you need expert consultation regarding store and design feel free to contact

[Made4uo-Ribe · Accepted solution]

Hi @ameye27 

To fix the mobile screen. 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
footer.footer {
    display: flex;
    flex-direction: column;
}

footer.footer .footer__content-top.page-width, .footer__content-bottom {
    width: 100% !important;
}

.footer__content-bottom-wrapper.page-width {
    padding: 0 5rem;
}
}

• And Save. 
• 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! 

[Mehran_Ali]

Hi @ameye27 

If you share your store link and password if its a password protected than we can help

[ameye27]

Hi @Mehran_Ali thank you! It's https://www.senitejewelry.com/

[Mehran_Ali · Accepted solution]

Hi @ameye27 

In your theme -> code-editor -> find base.css in search 
Past that CSS Code

footer { display: flex; align-items: center; flex-direction: row-reverse; }
.footer .footer__content-top { padding: 0; width: 50%; }
.footer .footer__content-top .footer-block {width: 100%;max-width: 100%;padding: 0 5rem;}
.footer .footer__content-top .footer-block ul { text-align: right; }
.footer .footer__content-bottom { padding: 0; width: 50%; border: 0; }
.footer .footer__content-bottom .footer__content-bottom-wrapper { justify-content: flex-start; }

If this Answer work kindly Like  and Mark This As Solution

If you need expert consultation regarding store and design feel free to contact

[ameye27]

Hi @Mehran_Ali really appreciate your help! Your solution did help but it's still looking wrong. Desktop looks good but mobile looks really off. For mobile, can the footer be left-aligned with each item being it's own row? Like this site's mobile footer https://wardrobe.nyc/pages/about

[Made4uo-Ribe · Accepted solution]

Hi @ameye27 

To fix the mobile screen. 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
footer.footer {
    display: flex;
    flex-direction: column;
}

footer.footer .footer__content-top.page-width, .footer__content-bottom {
    width: 100% !important;
}

.footer__content-bottom-wrapper.page-width {
    padding: 0 5rem;
}
}

• And Save. 
• 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! 

[ameye27]

@Made4uo-Ribe that works! Thank you so so much

[Mehran_Ali · Accepted solution]

HI @ameye27 

Sorry for this kindly add this code as well it will help for mobile view

@media(max-width:1025px){
    footer { display: block; }
    .footer .footer__content-top { width: 100%; }
    .footer .footer__content-top .footer-block {max-width: 100%;}
    .footer .footer__content-top .footer-block ul { text-align: left; padding-bottom: 14px; }
    .footer .footer__content-top .footer-block ul li { display: block; }
    .footer .footer__content-bottom { border-top: solid .1rem rgba(var(--color-foreground),.08); width: 100%; }
}

@media(max-width:768px){
    .footer .footer__content-top .footer-block { padding: 0px 15px; }
    .footer .footer__content-top .footer-block ul {margin: 0;padding: 0;}   
}