edit css of elements within iframe
<p>I am using some free instagram feed iframe code on my site and want to edit the size of the pictures on mobile...curently on desktop the feed is 2 rows of 5 pictures. on mobile I want to increase the size of the pictures to 50% width that way its 5 rows of 2 pictures. I opend up the console and it looks like its li.in-tile that needs a width:50%; however when you look at the css of that element it is .lightwidget.in-grid.in-grid-5 li with a width of 20% but i need it to be 50%.</p>

<p>I am using weebly to build the site if that helps and yes I am inserting</p>

<pre><code>.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}
</code></pre>

<p>onto the media query for mobile "max width 480px".</p>

<p>this is the embed code I am using to call the feed.</p>

<pre><code>&lt;!-- LightWidget WIDGET --&gt;&lt;script src="//lightwidget.com/widgets/lightwidget.js"&gt;&lt;/script&gt;&lt;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;"&gt;&lt;/iframe&gt;
</code></pre>

<p>obviously when the webpage renders that iframe it is calling an html doc hosted somewhere...I need to know if there is a way to alter that css.</p>

<p>hopefully i explained that well.</p>

<p>Thanks.</p>