im have a gallery that is responsive, but im having some problems with the iframe where the gallery is being inserted, the height is not being applied automatic and is showing a vertical scroll on the page, how can i make the iframe resizable on height styling only in the iframe tag or html page src?
My code: gallery.html:
<body>
<div class="">
<div class="galleryItem">
<a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a>
<h3>Title</h3>
<p>description of whatever</p>
</div>
<div class="galleryItem">
<a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a>
<h3>Title</h3>
<p>description of whatever</p>
</div>
<div class="galleryItem">
<a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a>
<h3>Title</h3>
<p>description of whatever</p>
</div>
<div class="galleryItem">
<a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a>
<h3>Title</h3>
<p>description of whatever</p>
</div>
</div>
</div>
</body>
CSS:
* {
padding: 0;
margin: 0;
}
/*GALLERY STYLES*/
.galleryItem {
color: #797478;
font: 10px/1.5 Verdana, Helvetica, sans-serif;
width: 60%;
margin: 2% 2% 50px 2%;
float: left;
-webkit-transition: color 0.5s ease;
}
.galleryItem h3 {
text-transform: uppercase;
line-height: 2;
}
.galleryItem:hover {
color: #000;
}
.galleryItem img.js-tagged-image {
max-width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
.galleryItem {width: 60%;}
}
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
.galleryItem {width: 60%;}
}
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.galleryItem {width: 60%;}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.galleryItem {width: 96%;}
.galleryItem img {width: 96%;}
.galleryItem h3 {font-size: 18px;}
.galleryItem p, .header p {font-size: 18px;}
}
Iframe:
<iframe frameborder="0" src="url/gallery.html" style="border: none; overflow:hidden; max-width: 1026px;" width="100%"></iframe>