After designing a website that was meant to be responsive for mobile devices, I faced an unexpected issue. While it worked perfectly on my old Android phone, newer smartphones such as iPhones and modern Androids using Google Chrome displayed the homepage with the background image cut off halfway.
If you want to see the problem yourself, feel free to visit or check out this screenshot:
Admittingly, I am still learning CSS and might have overlooked a simple mistake causing this issue. However, I've been unable to figure it out so far.
<html>
<head>
<title>The Story of Love</title>
<meta name="viewport" content="width=device-width;">
<style>
#wrap {
width: 500px;
margin: 0 auto;
}
.
.
.
.love2 {
position: top center;
top: 372px;
left: 0px;
height: 78px;
width: 320px;
}
.love2 a {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="wrap">
.
.
.
</div>
</body>
</html>