Menu
I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript). Iframe should be placed in bottom right corner. I can only control the style of an iframe.
I have created following demo page which demonstrates the problem in test host page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>On desktop browser this code works fine, but on (some) mobile devices the iframe is not visible on the screen. If I try to highlight an element its placed on gray area.
Why is happening this and how can I style an iframe so that will be placed on bottom right corner?
Edit: this is a screenshot from Galaxy S3 emulation (Chrome). Iframe is invisible in gray area. I think its the same on physical Nexus 5X device.
Many thanks!
968
1000px width had been given to #greeting , that's why the element out of your mobile width ,you can simply fix this like using media Queries. 992 width starting the portrait view of devices
@media (max-width:992px){
#greeting { width:100% !important; }
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
