edit css of elements within iframe

Question

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

I am using weebly to build the site if that helps and yes I am inserting

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

onto the media query for mobile "max width 480px".

this is the embed code I am using to call the 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>

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.

hopefully i explained that well.

Thanks.

Answer 1

[...] 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.

The question of how to style an element inside an iFrame has come up on StackOverflow many times before - try having a look here:

How to apply CSS to iframe?

Another post that addresses it can be seen here:

Using CSS to affect div style inside iframe

And one with a rather short explanation here:

CSS override body style for content in iframe?