I have a page with a html5 game in an iframe - it is vertical sized 3:4, and there is one line of text below it.
it vertically scales and stays in proportion 3:4 ok - BUT the game and text does not sit vertically centered... it sits slightly high. any ideas how to fix, so it's all vertically centered?
at smaller sizes (and for mobile) i wanted to get it sit centered with 50px of padding on the left and right of the game. but on mobile even with the padding set to the media query it does not show... any ideas how to fix?
Html and css code below:
thanks -
body {
font-family: 'Times New Roman', serif;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.iframe-container {
/* Define your desired aspect ratio here (e.g., 16:9) */
aspect-ratio: 3 / 4;
height: 80%;
}
iframe {
width: 100%;
height: 100%;
}
#text {
text-align: center;
padding-top: 16px;
color: orange;
}
/* Media query for smaller screens */
@media screen and (max-width: 600px) {
#text {
display: none;
/* Hide the text on screens below 600px width */
}
.iframe-container {
padding-left: 50px;
padding-right: 50px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game test layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body bgcolor="blue">
<div class="iframe-container">
<iframe style="border:5px inset silver;" src="https://rajeevbasu.com/projects/test/" allowfullscreen="true" scrolling="no" noresize="noresize" />
</iframe>
</div>
<div id="text">
<p>Copyright information here 2024. <img src="images/button.png"> <img src="images/button.png"></p>
</div>
</body>
</html>Everything I've tried, including current code is above.
The first issue relates to the CSS box model. When you set the width and/or height of an element, by default, they specify width of the content area of the element, excluding any padding or borders. Your iframe has a 5px border which is not included in the width and height you have specified. So the visible height your iframe, including the border, is 100% of its parent element, plus the 5px top border, plus the 5px bottom border, so it appears to be 10px too large, and not quite in the centre. Same story with the width.
The best solution is to set box-sizing on the iframe. This setting means that your specified height and width will include any padding and borders.
iframe {
box-sizing: border-box;
}
The next issue is the default margins on the p element which contains the copyright text. Just set the margin to zero.
#text p {
margin: 0;
}
The final issue is that on narrow screens, your combination of a height rule with an aspect-ratio rule on the iframe container causes its width to be greater than 100%. That’s why it spills over the sides. On smaller screens you’ll need to switch from height: 80% to width: 80%. This also negates the need for padding in the iframe container.
@media (max-width: 600px) {
.iframe-container {
height: auto;
width: 80%;
}
}
body {
font-family: 'Times New Roman', serif;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: blue;
}
.iframe-container {
aspect-ratio: 3 / 4;
height: 80%;
}
iframe {
width: 100%;
height: 100%;
border:5px inset silver;
box-sizing: border-box;
}
#text {
text-align: center;
padding-top: 16px;
color: orange;
}
#text p {
margin: 0;
}
@media (max-width: 600px) {
.iframe-container {
height: auto;
width: 80%;
}
#text {
display: none;
}
}<div class="iframe-container">
<iframe src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Novak_Djokovic_at_ATP_2015.jpg" allowfullscreen="true" scrolling="no" noresize="noresize" />
</iframe>
</div>
<div id="text">
<p>© Copyright information here.</p>
</div>