javascript - Mobile-friendly iframe CSS -

so on this site, made iframe, , tried making width fit mobile. however, when visit on iphone, shows tiny.

here's code:

.container-desktop {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;  }    @media screen , (max-width: 500px) {    .container-desktop {      display: none !important;    }  }    @media screen , (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 appreciate help!

your iframe using inline width of 300px, yet media queries targeting width of 500px. if want iframe appear full width mobile, increase width mobile view changing width="300px" width="500px" in .container-mobile.

.container-desktop {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;  }    @media screen , (max-width: 500px) {    .container-desktop {      display: none !important;    }  }    @media screen , (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 helps! :)