Centering text and icons - rise theme.

Shopify Discussion

Topic summary

A Shopify beginner using the Rise theme seeks help centering footer text (page links) and repositioning social media icons to match a desired layout. The user wants page links centered horizontally with social icons displayed below them.

Solution Process:

  • Community helper Made4uo-Ribe provides custom CSS code to be added to the theme’s stylesheet (base.css/style.css/theme.css)
  • Multiple iterations of CSS adjustments address:
    • Centering footer blocks and reversing their display order
    • Changing page links from vertical to horizontal layout using flex-direction: row
    • Adding gap spacing between elements
    • Repositioning social icons below the page links
    • Removing padding from link elements

Current Status:
The layout is nearly complete with centered elements and proper positioning. One minor alignment issue with the links remains unresolved despite attempts to add !important declarations. The helper’s final check shows the footer appears correctly aligned, though the original poster hasn’t confirmed full satisfaction or marked a solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
5

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;
}

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