Estoy usando un código de iframe de feed de instagram gratuito en mi sitio y quiero editar el tamaño de las imágenes en el móvil ... actualmente en el escritorio, el feed es de 2 filas de 5 imágenes. en dispositivos móviles quiero aumentar el tamaño de las imágenes al 50% de ancho de esa manera sus 5 filas de 2 imágenes. Abro la consola y parece que su li.in-tile necesita un ancho: 50%; sin embargo, cuando miras el CSS de ese elemento, es .lightwidget.in-grid.in-grid-5 li con un ancho del 20% pero necesito que sea del 50%.

Estoy usando Weebly para construir el sitio si eso ayuda y sí, estoy insertando

.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}

en la consulta de medios para dispositivos móviles "ancho máximo 480px".

Este es el código de inserción que estoy usando para llamar al feed.

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

obviamente cuando la página web muestra que iframe está llamando a un documento html alojado en algún lugar ... Necesito saber si hay una manera de alterar ese CSS.

Espero haberlo explicado bien.

Gracias.