I'm facing a unique issue at the moment. The landing page I've created is highly responsive on all mobile devices except for the web owner's device: . Interestingly, it appears differently on the web owner's Samsung and iPhone devices:Samsung device iPhone device
Below is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bluehedge Realtors</title>
<link rel="stylesheet" href="./styles.css" />
The CSS styling of the page:
@import url("");
body {
background: url("./Atlantic.jpg");
background-size: cover;
}
main {
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
}
Despite trying various responsive tools like Chrome/Edge developer tools, the issue persists only on the owner's phones. Any insights or suggestions would be greatly appreciated.