Footer Adjustments

[CreatorTim]

Hi guys, I need help with a few footer adjustments.

1. Move the bottom section higher, like in the picture:

   
   
   

2. Make the headings (STORE, LEGAL, NEWSLETTER) bold.
   
   

3. Set the text under the "Store" and "Legal" columns to the same size as the text that says "Stay up to date with the new collections, products, and exclusive offers." And slightly emphasize it—don’t make it bold, just a little more noticeable, maybe by simply making it white.
   
   I want it to look like this:

   

My store URL: https://1049xn-ya.myshopify.com/

Thank you so much, I really appreciate your help!
Tim

[LizHoang]

Hi @CreatorTim ,

Thank you for your question!

Please go to Theme editor > Theme settings > Custom CSS to add the following code:

1, Move the badges up:
h2.footer-block__heading.inline-richtext {
font-weight: bold;
text-transform: uppercase;
}

2, Make them uppercase:
h2.footer-block__heading.inline-richtext {
font-weight: bold;
text-transform: uppercase;
}

3, Adjust the font size and white color:
ul.footer-block__details-content.list-unstyled li a {
color: #fff !important;
font-size: 16px;
}

If you need to make the text below Newsletter white as well:
.footer-block--newsletter p {
color: #fff;
}

After that, you should get this result:

I hope my answer is helpful!

Best,
Liz.

[CreatorTim]

Hey, I just want to move the bottom section up, how do I do that?

Thank you,

Tim

[LizHoang]

Regarding the footer adjustment, please help me replace the previous code with this new set:
.footer__content-top {
padding-bottom: unset !important;
}
.footer__content-bottom {
padding-top: unset !important;
}

I hope it solve your problem now!

[CreatorTim]

Hey, thanks for your response, but the store name and the year didn’t move up.

 

Do you know how to also move it up?

Thanks!

Tim

[LizHoang]

In this case, please also add this code to your theme's custom CSS:

@media screen and (min-width: 750px) {
.footer__content-bottom-wrapper.page-width:nth-child(1) {
    flex: 5;
}
.footer__content-bottom-wrapper.page-width:nth-child(2) {
    flex: 1;
}
.footer__content-bottom {
    display: flex;
    flex-direction: row-reverse;
}
.footer__copyright {
    margin-top: 3.5rem !important;
}
}

[CreatorTim]

Hey, it did move up, but somehow the whole thing got wider, and now it looks like this:

I want the width to stay the same as before; I just wanted to move it up.

Thanks,
Tim

[LizHoang]

Hi @CreatorTim ,

Upon checking, I see that you have adjusted it yourself https://prnt.sc/Xa8j1ToVBfGw is that right? Then I am glad to know that we have assisted in resolving this problem!

Best,
Liz.

[Made4uo-Ribe]

Hi @CreatorTim 

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:

.footer__content-bottom {
    display: flex;
    flex-direction: row-reverse;
    max-width: var(--page-width);
    margin: auto;
    padding: 0 5rem;
}

.footer__content-top.page-width {
    padding-bottom: 3rem;
}
.footer-block--newsletter h2 {
    font-weight: bold;
}

.footer-block__newsletter p.newsletter-title,
.footer-block__details-content .list-menu__item--link {
    opacity: 1 !important;
    color: white !important;
}

• 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!