How to horizontal align social media icons and move within the footer (mobile view)

[piyaligupta]

I am struggling to alight the social media icons horizontally align in a single row and move it to the highlighted location. Any help is appreciated.

[goldi07]

Hello @piyaligupta

To horizontally align the social media icons and move them to the highlighted location in the Shopify footer (mobile view), follow these steps:

1. Locate the Footer Code
   Since you’re using a Shopify theme (likely in footer.liquid or theme.liquid), find the section where the social media icons are rendered.

2. Modify the Footer Code
   In your footer.liquid, wrap the social icons in a div and use CSS flexbox for horizontal alignment.

Find this section:

  FB
  IG

Modify it like this:

3. Add CSS for Alignment
   In your theme’s CSS file (base.css or theme.css), add:

.footer__social-icons {
  display: flex;
  justify-content: center; /* Center the icons */
  gap: 10px; /* Space between icons */
  margin-top: 10px; /* Adjust based on spacing needs */
}

.footer__social-icons a {
  font-size: 18px;
  color: #fff; /* Adjust color as needed */
  text-decoration: none;
}

@media (max-width: 768px) {
  .footer__social-icons {
    justify-content: flex-start; /* Align left in mobile */
    margin-left: 20px; /* Adjust based on placement */
  }
}

4. Move the Icons to the Highlighted Location
   Find the current placement of the social media section in footer.liquid and move it below the “Quick Links” section, near where the Cancellation Policy link is.

For example, move:

{% render 'social-icons' %}

to right after:

  - Cancellation Policy

After applying these changes, save and check on mobile. Let me know if you need adjustments

Thank you