Mihai Simion Mihai Simion - 1 month ago 18
CSS Question

Responsive iframe - fullscreen

This is my code:

.myIframe {
position: relative;
padding-bottom: 56.25;
padding-top:30px;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


This is my website : http://www.simtek.ro , the iframe is the 360 photo header, i just need to make it fit to screen on both mobile and desktop, i guess there is a simple solution for that but i can't figure it out :(

Answer

While looking at the source code for your website I noticed that it is invalid. You declare the doctype twice and have 2 pairs of opening and closing html tags. In regard to the original question try:

.myIframe {
height: 100vh;
overflow: auto; 
-webkit-overflow-scrolling:touch;
border: solid black 1px;
} 
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Comments