Я чувствую, что уже все перепробовал. Веб-сайт отлично выглядит на моем ноутбуке, в chrome инструментах для веб-разработчиков, при проверке iphone 6/7/8 plus, iphone x, ipad и ipad pro (так что любая высота выше 667 пикселей) мой контент обрезается , нижний колонтитул исчезает, и половина последней страницы исчезает на ipad.
Я знаю, что это высота, если я изменяю свойство высоты на что-то глупое, например, 5000px, и тогда, конечно, мой контент есть, но я Я получил множество пробелов на других мобильных устройствах, поэтому ясно, что это не решение проблемы.
Вот как это выглядит на таком устройстве, как iphone 6 - совершенно нормально
вот что я получаю на ihone X - нижний колонтитул goooone: (
Вот код ручки: https://codepen.io/DiteIkporo/pen/vYOmMdK
Вот мой css код
* {
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;
}
и это мой мобильный телефон. 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%;
}
это мой 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>
<a href="#" class="btn2">Read More</a>
</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>
<a href="#" class="btn2">Read More</a>
</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>
<a href="#" class="btn2">Read More</a>
</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><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></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>