CODEWITHSUNDEEP
htmlcssiframe
Robyn Price
Robyn Price

Reputation: 21

IFrame content not displaying full height

I have a responsive IFrame on my primary site and cannot get the content to display 100% height. Screen Shot. The image inside should be a rectangle shape. The width displays fine, but the IFrame either compresses the image to a shorter length, or maybe it's only displaying a smaller square portion of the height? Please advise what I am doing wrong, or can do, so the content displays 100% of the width and 100% of the height of the IFRAME

Thank you in advance!! :)

Here is a link to the IFrame page: https://www.pravacanamats.com/custom-yoga-mat-designer/

Also here is the current code html and CSS being used:

    <div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">
 <iframe src="https://www.beehoneyom.com/product/yoga-mat/"> <iframe src= marginheight="1" height="1"> 
<p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em>Please update your browser to its most recent version and try again.</p> </iframe> 
</div>
<iframe width="100%" height="768" src="https://www.beehoneyom.com/product/yoga-mat/" frameborder="0" allowfullscreen></iframe>

Upvotes: 2

Views: 7022

Answers (2)

YoJey Thilipan
YoJey Thilipan

Reputation: 687

iframe {
         height: 100vh;
         width: 100%;
       }

Working Fiddel is here

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28583

I made a fiddle of some improved, corrected html and css. However, your site takes a very long time to load still and there ARE simple things you can do about it. Minify your own HTML, javscript and css, the files on your server.

Read how to leverage browser caching (this makes a big difference) and a bonus would be if you optimised css delivery and js delivery

I see that you enabled compression since i posted the slow-load comment but it still ranks at 0/100 on both desktop and mobile on PageSpeedinsights. This is a very handy tool for testing the speed of your website. Helps gauge bounce rate too.

Hope this helps!

#makemat {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

.iframe-container-for-wxh-500x350 {
  padding: 25px 25px 70% 25px;
  /* padding-bottom = h/w as a % */
}

.iframe-container iframe {
  position: absolute;
  top: 50;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
}
<div id="makemat" class="iframe-container iframe-container-for-wxh-500x350">
  <iframe src="https://www.beehoneyom.com/product/yoga-mat/" marginheight="1" height="1" frameborder="0" allowfullscreen>  </iframe>
  <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em>Please update your browser to its most recent version and try again.</p>

</div>

Upvotes: 2

Related Questions