How to make Pinterest Widget Builder responsive?

Question

Pinterest Widget Builder allows you to flexibly create a widget to be placed on your site. I added one to this page , but there seems to be a limit on the width that you can set for the widget. For example, I set the width to 1170, but it only displays 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 board Pin pets on Pinterest.</a> 

This is the Bootstrap site, and I would really like this widget to be responsive. I tried applying the css style to the widget to see if I can influence 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 will be appreciated. Then I can apply an extra style.

Answer 1

The width of the widget depends on several factors:

• Cover Width: You cannot exceed this width
• Many values ​​of width-width + data filling: the width of the widget will not be right. It will be exactly the size of several elements inside + a small addition on the left and right, and indents between the elements
• And, given the foregoing, the width of the pin data scale is obviously

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

Answer 2

Wrap the widget in a container, for example. #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 overrides the width, which is otherwise fixed, making it responsive. The second question concerns the issue where the last column is not displayed if the widget is very narrow.

Answer 3

Here is the 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; } 

Answer 4

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

CSS

 #pinterest-container { display: flex; } #pinterest-container a { flex: 1; }