1

I have an iframe that is going to be implemented in various pages. I'm trying to add CSS media queries inside of it, so that it works differently on different devices. But the CSS media queries get the iframe's width, not the actual page. Is there a way to do this with CSS and not Javascript?

The iframe is coming from the same domain, and on desktop, it should have a fixed width, while on mobile i'm trying to set it a fluid width.

So far I tried using normal media queries like:

@media (max-width: 768px){
    //css here
}

But this returns always true because the iframe is < 768px;

Jon Dujaka
  • 23
  • 2
  • 8
  • Welcome to [so]! At this site you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a [**Minimal, Complete, and Verifiable example**](//stackoverflow.com/help/mcve). I suggest reading [ask] a good question and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). Also, be sure to take the [tour] and read **[this](//meta.stackoverflow.com/questions/347937/)**. – Alon Eitan May 03 '17 at 14:01
  • is the iframe coming from a site you own or is it an iframe like a youtube one where it's coming from an external source? – HisPowerLevelIsOver9000 May 03 '17 at 14:10
  • Checkout http://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe – Joe Duncan May 03 '17 at 14:11
  • Possible duplicate of [Media queries not working inside an iframe](http://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe) – Joe Duncan May 03 '17 at 14:14
  • Edited for clarity – Jon Dujaka May 03 '17 at 14:27
  • 1
    You can't target the page _inside_ the iframe with a CSS rule that is on the same page as the iframe itself – Asons May 03 '17 at 14:35

1 Answers1

-1

Use @media only screen and (max-device-width:768)

Moises Conejo
  • 157
  • 1
  • 5
  • device-width media queries are being deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width – naktinis Dec 19 '19 at 15:44