What's your biggest current challenge? Have your say in Community Polls along the right column.

Make footer 1 row instead of 2

Solved

Make footer 1 row instead of 2

ameye27
Tourist
4 0 1

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

 

current footer.jpg

 

new footer.png

 

  

Accepted Solutions (3)
Mehran_Ali
Shopify Partner
427 54 67

This is an 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

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536

View solution in original post

Made4uo-Ribe
Shopify Partner
9110 2177 2686

This is an 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:
    Made4uoRibe_0-1730577951690.png

     

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Mehran_Ali
Shopify Partner
427 54 67

This is an 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;}   
}

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536

View solution in original post

Replies 7 (7)

Mehran_Ali
Shopify Partner
427 54 67

Hi @ameye27 

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

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536

ameye27
Tourist
4 0 1
Mehran_Ali
Shopify Partner
427 54 67

This is an 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

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536

ameye27
Tourist
4 0 1

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
Shopify Partner
9110 2177 2686

This is an 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:
    Made4uoRibe_0-1730577951690.png

     

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
ameye27
Tourist
4 0 1

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

Mehran_Ali
Shopify Partner
427 54 67

This is an 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;}   
}

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536