Centering text and icons - rise theme.

[lofty]

Hi,

New to shopify and trying to lean as much as I can. I can't figure out how to center the footer text (pages created) and move down the social icons. I'm trying to make it look like: 

It currently looks like: 

[devcoders]

Hello @lofty 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[lofty]

Thanks for offering to help - tcgspot.ca

[lofty]

I thought it would be simple to center and line up the created pages and drop the social icons to a line below. Nope! 😞 Couldn't figure it out.

[Made4uo-Ribe]

Hi @lofty 

is this for the deksto only? If it is check 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__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex-direction: column-reverse;
    gap: 0;
}

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

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

.list-unstyled.list-social.footer__list-social, .footer__content-bottom-wrapper {
    justify-content: center;
}

.footer-block__details-content.list-unstyled {
      display: flex;
    justify-content: center;
    flex-direction:column
}

.footer-block__details-content.list-unstyled li {
    margin: 0;
}

• And Save.
• Result:
• 

  Let me know if you need help for mobile. 

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

[lofty]

Thanks for your help. It's looking better but here is how I see it on the computer. Is there a way to have the pages side by side instead of up and down. I don't think there will be more then 4-5 links at the bottom. 

 

[Made4uo-Ribe]

There is a part of code that you need to change or add.

This is the code currently 

Change into this. 

Result:

If it's to far just add gap. 

And Add this one so they both align. 

.footer-block__details-content.list-unstyled a {
    padding-bottom: 0; 
}

 And Save. 

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

[lofty]

That worked - much better. One last thing - getting the socials under the page links? Here is how it's looking:  

[Made4uo-Ribe]

Add this one. 

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column-reverse;
}
.list-unstyled.list-social.footer__list-social {
    align-self: center;
}

.footer-block--newsletter .footer-block__newsletter {
    margin: auto;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[lofty]

I was able to get most of it centered using the foot options within the theme. Just the icons are off to the side now ... 

 

[lofty]

This is all the code in there. The links are not lining up. 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex-direction: column-reverse;
    gap: 0;
}

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

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

.list-unstyled.list-social.footer__list-social, .footer__content-bottom-wrapper {
    justify-content: center;
}

.footer-block__details-content.list-unstyled {
    display: flex;
    justify-content: center;
    flex-direction:row;
    gap: 2rem;
}

.footer-block__details-content.list-unstyled li {
    margin: 0;
  padding-bottom: 0; 
}

.footer-block__details-content.list-unstyled a {
    padding-bottom: 0; 
}

[Made4uo-Ribe]

If you can catch up add !important on this code. 

like this. 

be sure you didnt add more signs or letter.

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

[lofty · Accepted solution]

It's almost perfect. Just the links are not lining up. This didn't fix it - also tried adding - !important;  to the end but that didn't fix it. lol

.footer-block__details-content.list-unstyled a {
    padding-bottom: 0; 
}

[Made4uo-Ribe]

It seems like you fix it. 

If my provided code didn’t please you, it’s okay not to mark it as a solution. However, I’d appreciate it if you could hit the like button. Thanks!