May 2, 2017 - 7 comments

Embed Responsive Full Width Pinterest Board

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/ 

Full Width Responsive Pinterest Board Embed

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? 🙂

Published by: Michael in Website Development
Tags: , ,

Comments

Jenny
January 30, 2018 at 3:34 am

Thank you so much! Used it and it worked

Gabi
March 30, 2018 at 2:21 pm

Work great! Thanks!

Michael
March 30, 2018 at 3:53 pm

Glad it worked for you, Gabi! Your site looks nice 👍🏼

Sam Frysteen
June 11, 2018 at 1:35 am

Brilliant – so simple and works a treat. Very odd that they dont have the embed be responsive already. Much appreciated mate.

Treicy
August 11, 2018 at 11:30 am

How I can make the pin size smaller and keep the grid responsive?

ahenredon
November 23, 2018 at 5:23 pm

This is terrific! Exactly what I’ve been looking for – thank you. It has caused the images to pixelate and I was wondering if you have any suggestions to remedy this?

    Michael
    November 23, 2018 at 6:23 pm

    Share a link so I can take a look?

Leave a Reply