Adjust footer layout to center on mobile view

Adjust footer layout to center on mobile view

In the footer section, add the following in the custom css:
Idea
@media only screen and (max-width: 749px) {
  .list-menu__item {
    justify-content: center;
  }
  .footer-block.grid__item.scroll-trigger.animate--slide-in {
    text-align: center;
  }
  .footer-block__brand-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}


    • Related Articles

    • Make copyright in the footer to center

      From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...
    • How to center multicolumn section header

      Add the following code under your Custom CSS section inside your theme customiser: .title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin { width: 100%; text-align: center; display: block; }
    • Display payment method icons at the footer

      From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code. In the Sections directory, click footer.liquid. If your theme doesn't include this file, ...
    • How to change another image for image banner in mobile view

      In theme.liquid, add the followings: <style> #shopify-section-ID { @media (max-width: 768px) { .banner__media { content: url("image URL") !important; } } </style>
    • Align featured collection titles to center

      In the featured collection section, add the following css in custom css: .collection__title.title-wrapper { text-align-last: center; }