编辑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之前多次 - 尝试看看这里：

如何将CSS应用到iframe？

另一篇文章解决它可以在这里看到：

使用CSS来影响div风格iframe

以下是一个相当简短的解释：

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:

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?

这篇关于编辑iframe中的元素的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！