How do I make a Pinterest Widget Builder Responsive?

Question

The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.

Here is the code:

<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180"  data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>

This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.

div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy { 
    border: 5px solid red; 
}

Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.

Fredericksburg

Answer 1

The width of the widget depends on a number of factors:

• The width of the enclosing element: you can't exceed that width
• A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
• And given the above, the data-pin-scale-width obviously

So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.

Lecherous

Hi Henri, looks like the key is the combination of the data-pin-scale-width and the exact pin-board-width. Thank you. – Fredericksburg

Answer 2

Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:

#pinterest-container > span {
    width: 100% !important;
    overflow: hidden;
}

#pinterest-container > span > span > span > span {
    min-width: 0;
}

The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.

Hussite

Answer 3

To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.

CSS

#pinterest-container {
    display: flex;
}

#pinterest-container a {
    flex: 1;
}

Geanticline

Answer 4

Here's a solution I came up with: http://pastebin.com/kXVDWUu8

I suggest including the following style:

#pin-container > span {
    box-shadow: none !important;
    width: 100%;
    overflow: hidden;
}

Condescending