I have been working on a simple code for a day now, trying to solve a problem with no progress :( My goal is to display an iframe with a background image. However, the snippet code I have is not showing the background image as intended. You can view the live demo here:
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>It seems that the iframe has too much height. Adding
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}seems to fix the issue.
However, when the screen size is less than 460px, the parent div becomes smaller and the static height for the child does not work correctly.
I have tried changing the parent div to display flex and table (along with modifying the child div), but nothing seems to solve my problem.
Please help me figure this out.