Content gets cut off on mobile view (iphone x, ipad, ipad pro) - css

Question

I feel like I've tried everything already. The website looks fine on my laptop, in chrome web developer tools, when checking iphone 6/7/8 plus, iphone x, ipad and ipad pro (so any height above 667px) my content is getting cut off, the footer disappears and half of the last page is gone on ipad.
I know it's the height, if I change the height property to something silly like 5000px and then of course my content is there but I've got loads of white space on other mobile devices so it's clear that's not the solution.
Here's what it looks like on a device like iphone 6 - perfectly normal
here is what I get on ihone X - the footer is goooone :(
Here's codepen: https://codepen.io/DiteIkporo/pen/vYOmMdK
Here is my css code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #ddd;
--dark: #002a3a;
--light: #fff;
--shadow: 0 3px 5px #000000;
--logo-color: #00b0b9;
--header-color: #3b89b9;
--btn2: #293857;
--grey: #6f7a90;
--shadow2: 0 0 8px #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
body{
font-family: arial, helvetica, sans-serif;
line-height: 1.6;
}
header {
padding: .5rem 2rem;
align-items: center;
width: 100%;
margin: 0;
background: var(--btn2);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1;
}
header #navbar{
display: flex;
justify-content: space-between;
}
#header-img{
width:8rem;
margin-left: -1rem;
}
#navbar ul{
display: flex;
}
#navbar ul li {
padding: 10px;
}
#navbar a{
color: var(--light);
text-transform: uppercase;
}
#navbar a:hover{
color: #eee;
font-weight: bold;
}
.product{
margin: 0;
background: url('../img/product.jpg') center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--light);
padding: 0 20px;
}
.product input{
padding: 0.3rem;
display: block;
margin: 0.9rem auto;
}
.product input#email{
width: 300px;
border-radius: 5px;
}
.product h1{
text-transform: uppercase;
font-size: 5rem;
line-height: 1.2;
}
.btn1 {
font-size: 1.2rem;
border-radius: 10px;
border: 1px #fff solid;
background: transparent;
color: var(--light);
}
.btn1:hover{
cursor: pointer;
}
.features {
background: url('../img/blue-close-up.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.box {
background: var(--btn2);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.box p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn2 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
border: solid #fff 1px;
border-radius: 5px;
padding: 0.5rem;
}
.pricing{
background: url('../img/blue-sky.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.level{
background: var(--header-color);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.level p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn3 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
padding: 0.5rem;
border-radius: 5px;
border: #fff solid 1px;
cursor: pointer;
}
.video {
background:url('../img/blue-close-up.jpg');
background-size: cover;
min-height: 100vh;
align-items: center;
display: flex;
align-items: center;
}
.block > iframe{
max-width: 560px;
width:100%;
box-shadow: var(--shadow);
}
.block{
/* background: var(--btn2); */
text-align: center;
/* box-shadow: var(--shadow); */
margin: auto;
width: 50%;
padding: 40px;
color: var(--light);
}
.block h2{
padding-bottom: 1.3rem;
}
.footer{
text-align: end;
padding: .5rem .5rem;
background: var(--btn2);
box-shadow: var(--shadow2);
position: relative;
}
.footer ul{
display: flex;
justify-content: flex-end;
}
.footer ul li{
margin-left: 1rem;
}
.footer ul li a{
color: var(--light);
}
.footer a:hover{
color: #eee;
font-weight: bold;
}
.footer span{
color: var(--light);
}
.price{
font-size: 2.5rem;
}
and this is my mobile.css
#navbar{
flex-direction: column;
align-items: center;
}
.product h1{
font-size: 3rem;
}
.features{
flex-direction: column;
padding:0;
}
.features h2{
font-size: 1rem;
}
.features p{
font-size: 0.8rem;
margin-bottom:0.2rem;
}
.box{
padding: 0.6rem;
margin: 1rem 2rem;
}
.btn2{
padding: 0.3rem;
}
.pricing{
flex-direction: column;
padding: 0;
}
.level{
padding:0.5rem;
margin: 1rem 2rem;
}
.level p{
padding:0.1rem;
margin-bottom:0.2rem;
font-size: 0.8rem;
}
.price {
font-size: 1rem;
}
.btn3{
padding:0.3rem;
}
.block {
padding: 10px;
width:80%;
}
this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DI Tech</title>
<script src="https://kit.fontawesome.com/fa769308d4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
</head>
<body>
<header id="header">
<nav id="navbar" class="main-nav">
<div class="logo">
<img id="header-img" src="img/fitbit-logo.png" alt="Fitbit logo">
</div>
<ul>
<li><a class="nav-link" href="#Product">Product</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="Product" class="product">
<h1>The future of tech is here</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, perspiciatis animi repellendus eum officiis amet obcaecati debitis, quidem facere quasi repellat ab laboriosam eius nesciunt non autem natus porro! Enim tempora quod sit laudantium!</p>
<form action="https://www.freecodecamp.com/email-submit" method="POST" id="form">
<input id="email" name="email" type="email" required placeholder="Enter Your Email...">
<input id="submit" type="submit" value="Subscribe" class="btn1"/>
</form>
</section>
<section id="Features" class="features">
<div class="box">
<i class="fas fa-cogs fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto perferendis ad necessitatibus magni obcaecati aperiam temporibus, quis odio iure.</p>
Read More
</div>
<div class="box">
<i class="fas fa-user-friends fa-2x"></i>
<h2>Lorem, Ipsum Dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ab beatae suscipit ipsam nulla voluptatibus nisi aut nam tempore veniam?
</p>
Read More
</div>
<div class="box">
<i class="fas fa-chart-line fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam amet quisquam tenetur? Exercitationem accusantium aliquid nesciunt.</p>
Read More
</div>
</section>
<section id="Pricing" class="pricing">
<div class="option">
<div class="level">Standard
<h2 class="price">£79</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Pro
<h2 class="price">£109</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Ultra
<h2 class="price">£159</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
</section>
<div class="video">
<div class="block">
<h2>Watch our most recent ad here</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/KTZH4Upbv4w?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="footer">
<footer>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<Span>DI Tech, Copyright © 2019</Span>
</footer>
</div>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Local JS File -->
<script src="js/main.js"></script>
</body>
</html>

Answer 1

Seems to be a bug in the dev tools as far as I can tell. I've had this problem in my own development too and I thought it was my fault. But after encountering it again today, I decided to look into it some more. I've gone on 3 reputable websites, viz. Stackoverflow, Gmail and freeCodeCamp, and selected the iPhone X in the dev tools to see if they had this problem too.
Lo and behold, they all do. You can just barely make out the content at the very end of the respective pages, and if you scroll up and then down quickly you can even see there's more content there that should be visible but just isn't.
So yeah, not a personal development flaw I don't think.