CODEWITHSUNDEEP
phpcssiframe
Ramaraju.d
Ramaraju.d

Reputation: 1363

How to reset the iframe properties at certain context of my web page. without using javascript

I am working on responsive design.. My Page contains iFrames

Example :

    <iframe class="frame" src="www.google.com?embed=true&width=800&height=600" style="height:100%;width:100%;border:none;">
   </iframe>

You can observe that i am also assigning the style as width and height:100% so that the iframe will be displayed responsive manner.

The problem is when my iframe is like 

    <iframe class="frame" src="www.google.com?embed=true" style="height:100%;width:100%;border:none;">
   </iframe>

The iframe seems to adjust properly on iPhone device's width.

and if i do mention height and width it will not adjust to iphone's width as i have defined the properties.

I tried this way: CSS

     @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
      .frame{
             width:320px;

             }
   }

But the iframe is popping out of the container-Frame.

So i just want to know how to reset the style for the class "frame" so that iframe that is being displayed on iphone will will have

<iframe src="www.google.com?embed=true"></iframe>

Thank you.

Upvotes: 0

Views: 272

Answers (1)

Akshay Deep Giri
Akshay Deep Giri

Reputation: 3280

try this:

<style type="text/css">

    @media only screen and (max-width: 400px) {
        .div {
            width: 300px;
        }
    }
</style>

here are more

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

Upvotes: 0

Related Questions