0

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>

Image result iframe: enter image description here

Pedro
  • 1,227
  • 3
  • 17
  • 35
  • Iframes have never been able to automatically setting their height or width based on content size. If you need it to automatically size to fit the contents you will need to use javascript to loop through the "galleryItem" divs and find the tallest div and then use a bit of math, for other content height, padding and/or margins, and then have javascript change the iframes height. – Krik Oct 25 '16 at 22:21
  • Did you see that ? http://stackoverflow.com/a/362564/3967385 – mlimon Oct 25 '16 at 23:36

1 Answers1

0

Unfortunately, it isn't something that can be easily done. There's a small library which you can use http://davidjbradshaw.github.io/iframe-resizer/ and I recommend. (I'm not affiliated to it in any way, except for a bug fix I contributed.)

Nick Ribal
  • 1,596
  • 16
  • 19