Mobile-friendly iframe CSS

Question

So on this site , I made an iframe, and tried making the width fit mobile. However, when I visit it on my iPhone, it just shows up tiny.

Here's my code:

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

I would appreciate any help!

Answer 1

You forgot to add meta viewport tag in head. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Add this meta in head part:

<meta name="viewport" content="width=device-width, initial-scale=1">

for Mobile Device if want iframe take full width of mobile screen just make width:100%

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } .container-mobile { max-width:100%; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="100%" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

Answer 2

Your iframe is using an inline width of 300px , yet your media queries are targeting a width of 500px . If you want your iframe to appear the full width for mobile, simply increase the width for the mobile view by changing width="300px" to width="500px" in .container-mobile .

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="500px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

Hope this helps! :)