I'm having trouble with displaying a Bootstrap responsive page inside an iframe in iOS safari browser. It works fine in Android Chrome.
In one of the iframes, the page loses its responsiveness and doesnt even scroll (horizontally as well as vertically).
In another iframe, a different page loses its footer and vertical scrolling displays the content behind the iframe.
The page which loses responsiveness
Scrolling issue
Used the following code
<iframe src="add.php" frameborder="0" overflow-x: hidden; overflow-y:hidden; style="height:100%;width:100%;"></iframe>
separately tried the following
<iframe src="add.php" frameborder="0" style="height:100%;width:100%;"></iframe>
iframe{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
As well as :
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
Using jQuery 1.11.3, Boostrap 3.3.5, respond.js, html5shiv.js, modernizr.js
Try to use this:
iframe {
border:none;
position: fixed;
width:100%;
height:100%;
overflow: auto;
}
This will make your iframe fit to the screen so that, everything remains on your view.
and make sure that, you have removed margin from body
Here is preview of W3Schools in iframe
Hope works fine.
Related
I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.
Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.
<div class="scroll-wrapper">
<iframe height="260" width="280" src="info.pdf"> </iframe>
</div>
.scroll-wrapper {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;
height: 300px;
}
Maybe you should try using viewport.
Or using responsive breakpoints
#media screen and (max-width:512px) {
size:
}
#media screen and (max-width:512px) {
.scroll-wrapper{
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;enter code here
height: 300px;
}
}
try this
iframe {
width: 100% !important;
}
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I'm trying to make a responsive template and I'm using iframes for youtube videos.
When i put a caption underneath the video it works fine on desktop, but when I go to responsive mobile mode there is big between caption and video.
Can any body help me to fix it, so that caption stay underneath the video regardless wether I'm on desktop or mobile.
Here is the link for my template:
http://www.sayarts.com/past-events.html
You are not using the right approach to make your videos responsive. Height for your videos remain fixed that's why their is huge gap between videos and caption on mobile phones.
To make the videos perfectly responsive, add the video inside a div like this:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
and then use the following CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can read more about it in this article
You can simply add this style to the wrapper element: height:auto, it seems to fix the problem.
#wrapper embed, #wrapper iframe {
max-width: 100%;
height: auto;
}
If you need more control use the responsive media queries, this is an example:
#media only screen and (max-width: 468px) {
body {
/*you specific styles*/
}
}
I am trying to display full webpages on my website using an Iframe, code here:
<iframe name="demo" src="http://healthcoach.ancorathemes.com/"; style='height: 100%;
width: 100%;' frameborder="0" scrolling="yes" id="iframe">...</iframe>
This works fine on a desktop browser but on a mobile device, won't resize and still shows the desktop version. This particular website is responsive by the way and works fine without an Iframe.
For iframe to be responsive just change the width defined in pixels to percentage for eg:
height: 100%;
width: 100%;
I have added an iframe and it is working fine in all browsers and some devices but in iphone 6. The iframe is not responsive. It does not fit 100% of iphone screen size.
I found many solutions online but most of them showed how to make an iFrame scroll in iphone. I dont need that. I want to make it responsive and adjust according to screen size.
<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>
I have removed the src="" in iframe in the sample above
From the screen shot it can be seen that the iframe is not responsive and a horizontal scroll appears. During loading the iframe is according to the devices viewport but once it is fully loaded the iframe takes the full width and the horizontal scroll appears.
Checking on browser stack
This problem is solved, simply had to apply this styling. I did an inline-css to this.
width: 1px;
min-width: 100%;
*width: 100%;
Here is a link to a more detail answer
I'm making attempts to build a responsive site however i'm am struggling with the resizing on the two background images i applied to my site. when i view on a mobile device the header looks squashed, i presume this is become a i applied a fixed height to the header. I have tried using the property height:auto, However still no joy.
can someone point out what i'm doing wrong?
#header{
background: url(images/page_header_1024px.png) no-repeat;
background-size: 100% 100%;
max-width:1024px;
min-height: 100%;
margin: 0 auto;}
click here
Write like this :
html, body{
height:100%;
}
#header{
min-height:100%;
}
Is there a reason you're not using a standard tag? Then the browser will natively resize it - try resizing this page (just your image in it's own window):
http://thisiswired.com/responsive/css/images/page_header_1024px.png
Is that the effect you want?