Как сделать Pinterest Widget Builder отзывчивым?

В Пинтерест Виджет Builder позволяет гибко создавать виджет для размещения на вашем сайте. Я добавил один на на этой странице, но, похоже, есть ограничение на ширину, которую вы можете установить для виджета. Например, я установил ширину в 1170, но она отображается только в 1111px.

вот код:

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

это загрузочный сайт, и я действительно хотел бы иметь возможность сделать этот виджет отзывчивым. Я попытался применить css стиль виджета, чтобы увидеть, могу ли я повлиять на него с помощью этого. Увы, не повезло. 

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

любые предложения по взаимодействию с этим элементом будут оценены. Затем я могу применить дополнительный стиль.

6
pinterest

4 ответов

ширина виджета зависит от ряда факторов:

  • ширина охватывающего элемента: вы не можете превышать эту ширину
  • несколько данных-pin-scale-width + padding: ширина виджета не будет заполняться правильно. Это будет точно размер нескольких элементов внутри + небольшой отступ слева и справа, и отступ между элементами
  • и учитывая вышеизложенное, данные-pin-scale-width очевидно

Так что если вы хотите точную ширину 1200, попробуйте data-pin-scale-width="195". Что делать, если включающий элемент больше.

2

оберните виджет в контейнер, например #pinterest-container, и добавьте следующие стили:

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

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

первый переопределяет ширину, которая в противном случае фиксирована, что делает ее отзывчивой. Второй касается проблемы, когда последний столбец не отображается, если виджет очень узкий.

2

вот решение, которое я придумал:http://pastebin.com/kXVDWUu8

Я предлагаю следующий стиль:

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

чтобы сделать виджет Pinterest отзывчивым, это решение, которое сработало для меня. Взято из здесь.

в CSS

#pinterest-container {
    display: flex;
}

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