редактировать CSS элементов в iframe
Я использую на своем сайте бесплатный код iframe для ленты Instagram и хочу редактировать размер изображений на мобильном устройстве ... на рабочем столе канал представляет собой 2 строки по 5 изображений. на мобильном телефоне я хочу увеличить размер картинки до 50% ширины, чтобы ее 5 строк по 2 картинки. Я открываю консоль, и она выглядит как ее li.in-плитка, которой нужна ширина: 50%; однако, когда вы смотрите на CSS этого элемента, это .lightwidget.in-grid.in-grid-5 li с шириной 20%, но мне нужно, чтобы он был 50%.
Я использую постное время для создания сайта, если это помогает, и да, я вставляю
.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}
на медиа-запрос для мобильного телефона "максимальная ширина 480 пикселей".
это код для встраивания, который я использую для вызова канала.
<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/3c1052429c9753bfa460e4a0636864a3.html" id="lightwidget_3c1052429c" name="lightwidget_3c1052429c" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
очевидно, когда веб-страница отображает этот iframe, она вызывает html-документ, размещенный где-то ... Мне нужно знать, есть ли способ изменить этот CSS.
надеюсь, я объяснил это хорошо.
Благодарю.