CODEWITHSUNDEEP
javascripthtmlcss
Mani Kanta Reddy
Mani Kanta Reddy

Reputation: 37

Show image when iframe viewport is small, using media queries

I want to display a demo.html page in a 400px square iframe. demo.html should display only an image when the view port is smaller than 400px. Later, when I click on that image in demo.html, the same page should render into fullscreen mode.

For example, you can embed a slide from slideshare.com and click a fullscreen icon to render in fullscreen. I want my page to render similarly.

Upvotes: 1

Views: 225

Answers (1)

Derek Story
Derek Story

Reputation: 9593

You could do something like: JS Fiddle showing example

Resize the fiddle to see the media query working.

html 

<body>
  <img src="" id="smallScreenImage" width="500" height="500" />

  <div id="mainContentWrap">
    <div>All content goes here that should be displayed above 500px</div>
  </div>

</body>

CSS

#smallScreenImage {display: none;}
#mainContentWrap {display: block;}

@media only screen and (max-width:500px){
    #smallScreenImage {display: block;}
    #mainContentWrap {display: none;}
}

Upvotes: 1

Related Questions