I'm currently working on a project for a class at school where I'm setting up a webpage to mimic a chatroom. I have a sidebar for users in the chatroom and the chatroom itself, which are both iframes with images contained within them. I want the iframes to be responsive; as the viewport size changes, i'd like the iframe and the image within it to resize as well.
I currently have both iframes floated to the left and added some spacing to make it look more chatroom-esque. I've visited the following link: Scale iFrame css width 100% like an image, however this is different than what I'm trying to do bc their using an embeded video, not a scrolling image. Anyone have a fix for this? I've been messing around with styles... check out the webpage at www.westerosnet.jaylaiche.com.
Additionally, here's HTML and CSS:
<html>
<head>
<meta charset=utf-8 />
<title>Welcome to Westeros.Net</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="container">
<h1>Welcome to Westeros.net</h1>
<h2>Your source for virtual strategy, betrayal, and more!</h2>
<iframe src="sidebar.jpg"></iframe>
<iframe id="room" src="chatroom.jpg"></iframe>
</div>
<div class="footer">
<h3>To learn the real events of this scene, click <a href="http://gameofthrones.wikia.com/wiki/Red_Wedding">here</a>.</h3>
<h3 id="copyright">Page created by Jay Laiche for Traci Gardner's ENGL 3844 Remixing A Story.</h3>
</div>
</body>
</html>
CSS:
body {
background-color: #cccccc;
}
iframe {
overflow: scroll;
height: 800px;
float: left;
border: 1px dotted #330099;
position: relative;
max-width: 100%;
display: block;
}
#room {
margin-left: 5%;
width: 600px;
}
.container {
margin-left: 10%;
margin-bottom: 50px;
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling:touch;
position: relative;
}
