I have a client who needed to embed a Pinterest board on their website. One problem; Pinterest's widget builder doesn't allow for setting "100% width". I spent time searching CodePen, Stack Overflow and random Pinterest forums but just couldn't find a solution.

 

Here's a super simple CSS fix that'll get you up and running with a true responsive and full width board embed.

1. Create your Pinterest Board Widget

Pinterest offers a Widget builder here: https://developers.pinterest.com/tools/widget-builder/ 

One note, you'll want to choose Create your own option under the Size drop-down menu. Be sure to change the width to something like 1920, or whatever your minimum container size happens to be.

2. Add two <div> wrappers

<div class="super-responsive-wrapper">
  <div class="board-wrapper">
    <!-- Your embed code here -->
  </div>
</div>

3. Add some custom CSS

.super-responsive-wrapper {
  width: 100%;
  margin: auto;
}

.board-wrapper {
  margin: auto;
  text-align: center;
}

.board-wrapper span {
  overflow: hidden;
  max-width: 100%!important;
}

 

That's all you'll need, just be sure to name the classes in your HTML to correspond with your CSS classes.

 

---

Surprisingly, EmbedResponsively doesn't offer a generator for Pinterest—maybe you guys can grab this code an implement sometime in the future? 🙂