I’m trying to get this page displayed at maximum height at 16:9 ratio. It works fine in all browsers except in android chrome browser where the bottom is cropped.
Here’s the link to the page:
https://www.inmatrix.com/temp/pikapaint/index6.html
You can see it fits perfectly in desktop.
Here’s how it looks on Andriod Chrome:
You can see the bottom is cropped.
I want the page to be displayed at full height in Android chrome.
Please help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;
}
.container {
position: relative;
width: calc(100vh * 0.563);
height: 100%;
margin: auto;
background-image: url(img/bg.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
#embedboxbg {
position: absolute;
background-color: #0f3d59;
width: 93.7%;
height: 45.73%;
opacity: 0.85;
left: 3.15%;
top: 15.44%;
filter: alpha(opacity=85); /* For IE8 and earlier */
}
.embedded_image {
position: relative;
width: 100%;
height: 100%;
}
.embedded_image_hyperlink {
position: absolute;
object-fit: contain;
width: 87.4%;
height: 42.2%;
top: 17.2%;
left: 6.3%;
margin-left: auto;
margin-right: auto;
}
.banner {
position: absolute;
width: 93.7%;
height: 21.66%;
bottom: 15.4%;
left: 3.15%;
}
.bannerbox {
position: absolute;
background-color: #227099;
width: 100%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
opacity: 0.85;
filter: alpha(opacity=85); For IE8 and earlier */
}
.googlelogo{
position: absolute;
width: 22%;
height: 12.5%;
bottom: 1.3%;
left: 3.15%;
}
</style>
<title>Share page</title>
</head>
<body style="margin:0; pbannerding:0;" bgcolor="#313131">
<div class="container">
<div id="embedboxbg"></div>
<div class="embedded_image">
<a href="https://pikapaint.com/downlobanner.jpg">
<img class="embedded_image_hyperlink" src="img/embedded_image.png"/>
</a>
</div>
<div class="banner">
<div class="bannerbox"></div>
</div>
<div class="googlelogo" onclick="location.href='https://play.google.com/store/apps/details?id=com.embarcbannerero.PIKAPAINT';" style="cursor: pointer;">
</div>
</div>
</body>
</html>