If you have a responsive designed website created for the optimum viewing experience across a wide range of devices then it's possible to embed the Phorest online booking iframe so it too will resize itself to provide easy navigation and reading on any sized device.
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
Responsive iframe
|
<!DOCTYPE html>
<html>
<head>
<title>
iframe testing
</title>
<meta name="description"/>
<meta name="author"/>
<style>
.iframe-container {
position: relative;
height: 800px;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header></header>
<section>
<div class="iframe-container">
<iframe src="https://subdomain.phorest.me/book" width="900" height="800" frameborder="0"></iframe>
</div>
</section>
<footer></footer>
</body>
</html>
|
Having done this, the online booking widget will now resize with the screen’s width.