I have a this :
<div style="height:100%">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe width="100%" frameborder="0" height="100%" src="baba"></iframe>
</div>
It's showing me 2 scroll bars. The height of the iframe is 100% but it's finally 100% + 30px. I don't know how to resolve that
You can use property calc() like this :
<div class="container">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe frameborder="0" src="baba"></iframe>
</div>
CSS
.container iframe{
height:calc(100% - 30px);
}
The bad about this maybe is compatibility check it here
Related
Here is my iframe :
<div class="col-md-5 md-offset-1 col-sm-12" >
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/2lW2/4ew" width="100%" height="224"></iframe>
</div>
And here is the result :
As you can see :
there is a scrollbar, although i specified "no".
I need to scoll to access the confirmation button
When I increase the height of iFrame, it doesn't resize the inside box.
Any help ?
I am trying to align a picture to the right of my googlemaps on a webpage, Ive tried align="right", style = "text-align: right;" but it either puts the picture to the left of the googlemaps or puts it below it. i have tried putting them both inside and tried creating separate Any ideas? my code below
<div>
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg" style = "text-align: right;">
</div>
You can use the style float:left on your div tags.
<div style="float:left">
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg">
</div>
There are a lot of ways to do this, I have created a fiddle using floats. However, contrary to what you might think... I am using float: left;. I have created a <div> to contain the <iframe> and a <div> to contain the <img>. I set both the <iframe> and <img> to width: 100%; so they fill their respective containers. This way, whatever width you set for the outer containers, they will fill them responsively. Check out the fiddle:
https://jsfiddle.net/fushniki/9cn3ptok/
try using span , instead of div for 2nd div
<span class="col-sm-3" style="float:left">
<img src="layout.jpg" style = "text-align: right;">
</span>
This iframe's width and height won't change. I want responsive design. Please help.
Now:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="300"
height="300">
Modified 500x500 - not working, still 300x300:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="500"
height="500">
for a pure CSS solution you need to wrap your iframe around a container and apply styles to it, for more details please see http://andmag.se/2011/11/responsive-embeds/
Another option is using jquery
please take a loom at https://gist.github.com/aarongustafson/1313517
Try this code,
<html>
<body>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.iframe1 {position:relative;}
.iframe1 .ratio {display:block;width:100%;height:auto;}
.iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
<div class="wrapper">
<div class="iframe1">
<img class="ratio" src="sometransparentimage.jpg"/>
<iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/
i am using the "old" FB Likebox:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("394109690683544");</script>
<fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
</div>
</div>
</div>
how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.
thank you
It will not work, if you look at the code that's generated
<fb:fan height="120px;" width="200%" ...
translates into
<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"
Which means that the widget reads only the values as the iframe is set to 200px not 200%
EDIT:
Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...
JSFiddle