PDA

View Full Version : Why is my iframe not responsive for all devices?



wizard7611
May 12th, 2017, 06:08 AM
I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices so people using different devices can view it in the same way. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:

https://i.stack.imgur.com/2IhS6.png

Please help me resolve this issue! I've been battling this for the past two weeks and I'm about ready to hire a developer! Here is the code for it:


<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}

h1,
h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000, 0 0 0.12em #000;
}

.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}

.af-element {
text-align: center;
}

#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}

.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>

<body>
<div id="worked"></div>
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
</div>
</div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668">
<input name="meta_split_id" type="hidden" value="">
<input name="listname" type="hidden" value="awlist4661276">
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true">
<input name="meta_adtracking" type="hidden" value="My_Web_Form">
<input name="meta_message" type="hidden" value="1">
<input name="meta_required" type="hidden" value="name,email">
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</div>

<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</div>

<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
</div>

<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear">&nbsp;</div>
</div>

</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script>
</body>

</html>

Thanks!

deathshadow
May 12th, 2017, 07:19 AM
Probably because it's an iframe... which are generally NOT conducive to responsive design. Though you did not show us the iframe or style being applied to it, so I can only assume what you have here is the content being put INTO the iframe?

Though what you have shown has its share of problems -- lack of a doctype would put legacy browsers into "quirks mode" with an entirely different "box model" (how widths and paddings are added together). The use of numbered headings on the page is nonsensical gibberish and really the form itself isn't much better in that regard -- though entirely inline with what I expect from the typical sleazy scam that are online form generators like AWeber -- which sorry to tell you, do a great job of saddling you up and taking you for a ride when you're just starting out at this stuff.

From the empty labels, endless pointless code for nothing, abusing placeholder to do label's job, etc, etc... it's a laundry list of how NOT to code a form if you care about accessibility and usability -- BOTH of which are stepping stones on the road to an accessible mobile friendly design.

The static style in the markup missing the caching opportunity sure isn't helping matters much either, and to be frank I'd be wondering why this is even in an iframe as a separate file instead of just static in the existing markup like a good little doobie...

That said, I'm not seeing any fixed widths declared that could interfere with the frame behavior, since you have no min-widths or fixed width declarations the only thing that might screw you over is the default width of the input, and even that should be a non-issue here.

Meaning most likely, your problem isn't in the code you showed us, but in the page in which these contents are being shown. What's the markup for the iframe itself and what style is being applied to it?

iframes... I've been seeing more and more posts across various forums of people using and having troubles with iframes. Is some new tutorial or book out there telling people to use them again despite HTML 4 Strict having told us twenty years ago to cut it out? It was deprecated in 4 Strict for a reason people... We're NOT even supposed to be considering it unless we absolutely have to for something OFF-site like Youtube videos or adverts... WHY are people suddenly throwing them en-masse at on-site content again?

Just TRYING to make sites less accessible and harder to maintain/develop?!?

VIPStephan
May 12th, 2017, 09:10 AM
Though you did not show us the iframe or style being applied to it, so I can only assume what you have here is the content being put INTO the iframe?

Comparing the linked image with the code I have the feeling that the iframe is generated dynamically with the <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>. So other than hosting their video with another company that doesn’t use iframe to embed their video there not much the user can do to avoid iframes altogether.

That said, wizard7611, you’d better show us a link to the page in question or post the generated source code (i. e. what you see when you look at the HTML in the browser’s developer console). There are ways to make iframe resize dynamically while keeping their specified aspect ratio. But I don’t want to just link to it without knowing what you actually have there.

wizard7611
May 12th, 2017, 02:05 PM
Yea, about that, I'm not able to edit the website's source code, but rather embed HTML inside of it using the Wordpress text widget(the builder I'm using is not Wordpress, but uses some of the features Wordpress provides). Here is the website's url: untitled document (http://bloggingnetworkonline.com/InternetMarketing/landing-page/)

deathshadow
May 12th, 2017, 03:06 PM
There's no iframe on that "untitled document"... so unless you're showing that page IN an iframe on some other page, REALLY no clue what you're talking about.

The video DOES eventually come from a <video> tag that's added by scripting... but holy hannah what a train wreck of ENDLESS div for nothing that .. whatever "whistia" is.. saddles you with. Went for the document inspector first and after NOT finding <video> or <iframe> after checking some 30+ deep on div nesting, I gave up and used the web developer toolbar for FF to pull the post scripting generated source.

First thing I'd suggest... axing that video service and picking something that doesn't slop itself all over the markup for who knows what. THEN I'd probably suggest axing the auto-playing video since that just pisses off visitors... but that would in fact make the entire page design not viable since it reeks of advertising scam that most users would likely bounce from before it even finished loading... Likely why I don't even get any content on the page in my daily driver browser (vivaldi) once Adguard Adblocker, Adblock Plus, Ghostery, and my various tampermonkey scripts are done neutering all the little nasties on the page.

So good luck with that.

VIPStephan
May 12th, 2017, 03:37 PM
Yea, about that, I'm not able to edit the website's source code, but rather embed HTML inside of it using the Wordpress text widget(the builder I'm using is not Wordpress, but uses some of the features Wordpress provides). Here is the website's url: untitled document (http://bloggingnetworkonline.com/InternetMarketing/landing-page/)

OK, yeah, what Iím seeing in the source code is this:



<!-- BEGIN .post-area full-width -->
<div class="post-area full-width">


<h1 class="headline">Want my FREE and EASY training course that can make you have LOTS of TIME and MONEY?</h1>

<div id="pl-256">
<div class="panel-grid" id="pg-256-0" >
<div class="panel-grid-cell" id="pgc-256-0-0" >
<div class="so-panel widget widget_text panel-first-child panel-last-child" id="panel-256-0-0-0">
<div class="textwidget">
<p><html><br />
<head><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"><br />
<!--[if lt IE 9]><br />
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><br />
<![endif]--><br />
<title>untitled document</title></p>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}
h1,h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
}
.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}
.af-element {
text-align: center;
}
#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}
.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
<p></head><br />
<body> </p>
<div id="worked"></div>
<p><script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script></p>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
</div>
</div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<p><!-- AWeber Web Form Generator 3.0.1 --></p>
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668"><br />
<input name="meta_split_id" type="hidden" value=""><br />
<input name="listname" type="hidden" value="awlist4661276"><br />
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true"><br />
<input name="meta_adtracking" type="hidden" value="My_Web_Form"><br />
<input name="meta_message" type="hidden" value="1"><br />
<input name="meta_required" type="hidden" value="name,email"><br />
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..."></p>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label></p>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</p>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label></p>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</p>
</div>
<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>
<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear">&nbsp;</div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<p><!-- /AWeber Web Form Generator 3.0.1 --><br />
<script></p>
<p>(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script><br />
</body><br />
</html></p>
</div></div>
</div>
</div>
</div>


<div class="clear"></div>


<!-- END .post-area full-width -->


You are basically pasting a whole HTML document into the text/HTML widget; you canít do that. The widget is not an iframe. From the editorís point of view this is just a textarea where you can put text and code, and from a clientís (web browserís) point of view thatís a simple div element inside which the text/HTML code is parsed.

One of the problems is that Wordpress is automatically wrapping <p> tags around any content it doesnít specifically recognize as legitimate HTML. Whatís causing all the space is the redundant <br/> and <p> elements there. You need to remove everything that isnít actually content (i. e. all header stuff etc. because there can be only one document header in a document, and that is provided by the Wordpress theme/page template already).