Issues with iFrame's


Hi all, I just started here a week ago and decided to have a go at creating my own website using the knowledge of HTML and CSS I picked up here. A week ago I knew nothing of CSS so my codes probably messy at the moment.

What I’m trying to do is create a website with an iFrame that opens up a static website in the middle but for the life of me I can’t get it to display responsively. Especially on Mobile devices too! I was wondering if anyone could help?

My website is and the code I have for it is below.

<div class="intrinsic-container">
  <iframe src="homepage.html" allowfullscreen></iframe>

intrinsic-container {
	position: relative;
	overflow: hidden;
	height: 100%;

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
  overflow: hidden;
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
  overflow: hidden;

.intrinsic-container iframe {
	position: absolute;
	left: 3.5%;
	width: 84%;
	height: 87%;
	top: 8%;
	border: hidden;


you need to make the homepage.html responsive, for starters in pages.css you should add some padding to body so the text shows nicely in the frame even on full screen

making an iframe page responsive is a challenge, but a fun one

so far, you haven’t done much to homepage.html to make it responsive? That should be your primary focus

you should also look into overflow:


I didn’t even think about making the homepage responsive! Thank you so much, I just expected it to display within the contents of the frame, I’ve made some changes now and it flows better on different sized browsers. No difference to the mobile portrait mode though, I think I’ll have to do some more messing around. :slight_smile:


nope, that is not happening, that would make programming way to easy

seems you can manage on your own just fine, knowing what you need to do, well done :slight_smile:


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.