编辑iframe中的元素的CSS [英] edit css of elements within iframe
问题描述
我在我的网站上使用了一些免费的Instagram feed iframe代码,并且想要在移动设备上编辑图片的大小...在桌面上,在Feed中有两排5张图片。在移动设备上,我想将图片的大小增加到50%的宽度,就像5张2张图片那样。我打开控制台,它看起来像它的li.in-tile需要宽度:50%;然而,当你看那个元素的CSS时,它是.lightwidget.in-grid.in-grid-5 li,宽度为20%,但我需要它是50%。
如果有帮助,我正在使用weebly来构建网站,并且是插入
.lightwidget.in- grid.in-grid-5 li {
width:50%!important;
}
添加到移动媒体查询max width 480px。
这是我用来调用提要的嵌入代码。
< ! - LightWidget WIDGET - >< script src =// lightwidget.com/widgets/lightwidget.js\"></script><iframe src =// lightwidget.com/widgets/3c1052429c9753bfa460e4a0636864a3。 htmlid =lightwidget_3c1052429cname =lightwidget_3c1052429cscrolling =noallowtransparency =trueclass =lightwidget-widgetstyle =width:100%; border:0; overflow:hidden;>< / IFRAME>
显然,当网页呈现iframe时,它正在调用托管在某处的html文档...我需要知道是否有办法改变该CSS。
希望我解释得很好。
谢谢。 / b>
[...]显然,当网页呈现iframe时,某处。我需要知道是否有办法改变这个CSS。
如何在iFrame中设置元素的样式问题已经出现StackOverflow之前多次 - 尝试看看这里:
另一篇文章解决它可以在这里看到:
以下是一个相当简短的解释:
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.
[...] 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:
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?
这篇关于编辑iframe中的元素的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!