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 · Accepted solution]

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:

<div class="footer__social">
  <a href="{{ social.facebook }}" class="social-icon">FB</a>
  <a href="{{ social.instagram }}" class="social-icon">IG</a>
</div>

Modify it like this:

<div class="footer__social-icons">
  <a href="{{ social.facebook }}" class="social-icon"><i class="fab fa-facebook"></i></a>
  <a href="{{ social.instagram }}" class="social-icon"><i class="fab fa-instagram"></i></a>
</div>

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:

<ul class="quick-links">
  <li><a href="#">Cancellation Policy</a></li>
</ul>

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

Thank you 😊