
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? 🙂
Related
Published by: Michael in Website Development
Tags: code, pinterest, responsive
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?