edit css of elements within iframe

C

2

10

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.

Comstockery answered 9/4, 2016 at 3:51 Comment(1)

do you need to make width:50% am i right? – Digiovanni 9/4, 2016 at 7:4

A

13

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

Associative answered 9/4, 2016 at 7:22 Comment(1)

thanks. im new to website development and dont really understand JS. I guess I need to study up on that now. – Comstockery 9/4, 2016 at 18:35

T

2

Short answer: it is no longer possible. You can't modify iframe contents even if you are only working with local files.

It looks likes users were able to edit the iframe contents via JavaScript in the 2010s with HTML4 or HTML5.

However, I think that that is not possible anymore as of the 2020s or July 2022. With HTML5 and latest web browsers, e.g., Firefox Browser 102.0 (64-bit), it no longer works. I tried various solutions as posted in these threads and they did not work:

Something of a solution: don't use JavaScript+iframes. Either use userscripts or PHP to change the CSS of a local webpage or a remote webpage. You can use a userscript in Greasemonkey (for Firefox) to change the client-side CSS of a remote webpage. You can use PHP to change the CSS of an included local webpage; for example, the following changes all text to red when rendering an HTML file which is included in a PHP file:

<html>
[...]
<style>* {color: red;}</style>
[...]
<?php include 'file.html';?>
[...]
</html>

(PHP might also be able to change the .js scripts of an included local web page.)

Tiler answered 11/7, 2022 at 2:20 Comment(0)

Recommended topics

Hot tags