Responsive Social Media Section

By Laurel Beyers

How do I use This?

A responsive section for social media links with icons or any other featured links.

HTML

<!-- Use these stylesheets for icons and typography in head of your HTML doc if you want :) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<!-- Start of body below -->

<div class="social-links">
  <div class="row">
    <div class="small-6 medium-3 columns text-center mobile-stack">
      <a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</a>
    </div>
    <div class="small-6 medium-3 columns text-center mobile-stack">
      <a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i>Instagram</a>
    </div>
    <div class="small-6 medium-3 columns text-center mobile-stack">
      <a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i>Pinterest</a>
    </div>
    <div class="small-6 medium-3 columns text-center mobile-stack">
      <a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a>
    </div>
  </div>
</div>

$highlight: #1d92cf;

.social-links {
  background: $highlight;
  padding: 2rem 0 1rem;

  a {
    color: white;
    font-size: 1.2rem;
  }

  i.fa {
    font-size: 1.4rem;
    padding-right: 0.8rem;
    padding-bottom: 1rem;
  }

  @include breakpoint (small only) {
    padding: 2rem 0;

    i.fa {
      font-size: 2rem;
      display: block;
      padding-right: 0;
      padding-bottom: 0.5rem;
    }

    a {
      font-weight: bold;
    }

    .columns {
      margin: 1rem 0;
    }

    .mobile-stack {
      display: flex;
      flex-direction: column;
    }
  }
}

.social-links {
  background: #1d92cf;
  padding: 2rem 0 1rem;
}

.social-links a {
  color: white;
  font-size: 1.2rem;
}

.social-links i.fa {
  font-size: 1.4rem;
  padding-right: 0.8rem;
  padding-bottom: 1rem;
}

@media screen and (max-width: 39.9375em) {
  .social-links {
    padding: 2rem 0;
  }
  .social-links i.fa {
    font-size: 2rem;
    display: block;
    padding-right: 0;
    padding-bottom: 0.5rem;
  }
  .social-links a {
    font-weight: bold;
  }
  .social-links .columns {
    margin: 1rem 0;
  }
  .social-links .mobile-stack {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

Responsive Social Media Section

By Laurel Beyers

Responsive Blog Footer

Travel Feature Card

Inline Quote

Responsive Social Media Section

By Laurel Beyers

Similar Building Blocks

Responsive Blog Footer

Travel Feature Card

Inline Quote