I have a website that I am trying to make responsive. On the Dev Tools everything looks fine but when I access my website on the actual devices (Iphone 6S and MacBook Air) the height is wrong. The background image and content of that
overflow past the viewport and you have to scroll down to see the rest of it. I have seen people get their sections to take up the entire viewport on each and every device so I know it can be done.
Like I said, this happens only on the real device, not the emulator.
<section class="top">
<header class="page-header">
<img class="page-header__item" src="img/favicon.png" alt="logo">
<nav class="main-navigation page-header__item">
<ul role="menubar" class="navigation-list">
<li role="presentation">
<a href="#about" role="menuitem" class="navigation-list__item">About</a>
</li>
<li role="presentation">
<a href="#work" role="menuitem" class="navigation-list__item" >My Work</a>
</li>
<li role="presentation">
<a href="#contact" role="menuitem" class="navigation-list__item">Contact</a>
</li>
</ul>
</nav>
</header>
<div class="profile">
<p class="profile__name">My Name</p>
<p class="profile__dev">Web Developer in Some City/p>
<ul class="social-media">
<li>
<a title="Github" href="https://github.com/">
<img class="social-media__icon" src="img/github.png" alt="Github">
</a>
</li>
<li>
<a title="LinkedIn" href="https://www.linkedin.com/">
<img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn">
</a>
</li>
</ul>
</div>
</section>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--main-font: 'Quicksand', sans-serif;
--second-font: 'Trispace', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
html, body {
height: 100%;
}
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
.page-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-right: 1.5rem;
}
.page-header__item {
-webkit-box-flex: 0;
-ms-flex: 0 1 200px;
flex: 0 1 200px;
}
.page-header__item:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: right;
}
.navigation-list {
margin-right: 1rem;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.navigation-list li {
margin: 1rem 0;
font-size: 2rem;
list-style: none;
}
.navigation-list a {
color: white;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
.navigation-list a:hover,
.navigation-list a:focus {
text-decoration: underline;
}
.top {
background-image: -o-linear-gradient( rgba(8, 8, 37, 0.8), rgba(0, 15, 80, 0.625)), url("../img/pic2.jpg");
background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(8, 8, 37, 0.8)), to(rgba(0, 15, 80, 0.625))), url("../img/pic2.jpg");
background-image: linear-gradient( rgba(8, 8, 37, 0.8), rgba(0, 15, 80, 0.625)), url("../img/pic2.jpg");
background-size: cover;
background-position: center;
min-height: 900px;
width: 100%;
height: 100vh;
background-attachment: fixed;
object-fit: contain;
}
.profile {
text-align: center;
color: white;
}
.profile__name {
padding-top: 12rem;
font-size: 3rem;
font-family: 'Quicksand', sans-serif;
}
.profile__dev {
font-size: 2rem;
font-family: 'Trispace', sans-serif;
}
.social-media {
margin-top: 10rem;
padding-bottom: 2rem;
padding-inline-start: 0%;
}
.social-media li {
display: inline-block;
list-style: none;
margin: 0 6%;
}
.social-media img {
width: 90px;
height: 90px;
}
What I have tried:
I have tried setting the height to vh and that didn't work.