I’m trying to make a responsive webpage depicting a certain layout, but when viewed with different magnification or resolutions, the whole layout breaks down. I wanted to make child divs change size while respecting its relative positions in the parent div. Child divs change size along viewpoint, but the position stays in the same location.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PlayStation 2</title>
<link rel="stylesheet" href="myStyle.css">
<link rel="shortcut icon" href="/image/Playstation_logo_colour-01_1.ico" type="image/x-icon">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap');
</style>
</head>
<body>
<section>
<div id="consoleShowcase">
<div id="consoleBody"><img src="image/consoleBody.png" alt="">
<div id="ps2Logo"><img src="image/ps2Logo.png" alt=""></div>
<div id="sonyLogo"><img src="image/sonyLogo.png" alt=""></div>
<div id="psLogo"><img src="image/psLogo.png" alt=""></div>
<div id="resetButton"><img src="image/resetButton.png" alt=""></div>
<div id="cdTrayButton"><img src="image/cdTrayButton.png" alt=""></div>
<div id="compactDiscLogo"><img src="image/compactDiscLogo.png" alt=""></div>
<div id="dolbyLogo"><img src="image/dolbyLogo.png" alt=""></div>
<div id="dtsDigitalOutLogo"><img src="image/dtsDigitalOutLogo.png" alt=""></div>
<div id="dvdVideoLogo"><img src="image/dvdVideoLogo.png" alt=""></div>
<div id="dvdRomLogo"><img src="image/dvdRomLogo.png" alt=""></div>
</div>
</div>
</section>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
#consoleBody {
position: relative;
width: 100%;
height: auto;
}
#ps2Logo, #sonyLogo, #psLogo, #resetButton, #cdTrayButton,
#compactDiscLogo, #dolbyLogo, #dtsDigitalOutLogo, #dvdVideoLogo, #dvdRomLogo {
transition: 0.5s;
position: absolute;
}
img {
max-width: 100%;
height: auto;
#ps2Logo{
margin-top: 35%;
margin-left: 27.5%;
}
#sonyLogo{
margin-top: 2%;
margin-left: 88.4%;
}
#psLogo{
margin-top: 45%;
margin-left: 91.05%;
}
#resetButton{
margin-top: 7%;
margin-left: 88.34%;
}
#cdTrayButton{
margin-top: 7%;
margin-left: 94.3%;
}
#compactDiscLogo{
margin-top: 52.5%;
margin-left: 80%;
}
#dolbyLogo{
margin-top: 36.4%;
margin-left: 80%;
}
#dtsDigitalOutLogo{
margin-top: 26.2%;
margin-left: 80%;
}
#dvdVideoLogo{
margin-top: 15.9%;
margin-left: 80%;
}
#dvdRomLogo{
margin-top: 5.5%;
margin-left: 80%;
}
I tried position relative on parent and absolute on children, but that didn’t help.
New contributor
Tessee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.