Skip to content

Instantly share code, notes, and snippets.

@chrisbodhi

chrisbodhi/double-index.html

Last active February 2, 2018 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisbodhi/25d0c01a72f75995539e1e637eb8bcff to your computer and use it in GitHub Desktop.
Save chrisbodhi/25d0c01a72f75995539e1e637eb8bcff to your computer and use it in GitHub Desktop.
Download ZIP
Display desktop and mobile views, side-by-side
Raw
double-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Side-by-side</title>
<style>
body {
background-color: rgba(0, 0, 0, .85);
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
min-width: 95vw;
min-height: 98vh;
}
iframe {
height: 100%;
width: 100%;
}
.frame {
height: 95vh;
width: 100%;
}
.left-frame {
/* flex-grow: 2; */
}
.right-frame {}
.right-frame iframe {
/* Galaxy S5 dimensions */
height: 640px;
width: 360px;
margin-left: 50px;
margin-right: 100px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="frame left-frame">
<iframe name="desktop" src="https://localhost:8080">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Desktop View</title>
</head>
<body>
</body>
</html>
</iframe>
</div>
<div class="frame right-frame">
<iframe name="mobile" src="https://localhost:8080">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mobile View</title>
</head>
<body>
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment