редактировать 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.

надеюсь, я объяснил это хорошо.

Благодарю.

Ответы на вопрос(1)

Ваш ответ на вопрос