问题
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.
回答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?
来源：https://stackoverflow.com/questions/36512542/edit-css-of-elements-within-iframe