There seems to be an issue with whitespace sometimes appearing when viewing the responsive side in Chrome, but it resolves itself upon refreshing the page. This problem specifically occurs when working on the responsive aspect of the website.Here is an image depicting the issue.
const fade = document.querySelectorAll('.fade');
window.addEventListener('scroll', checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = window.innerHeight / 3.5 * 4;
fade.forEach(fade => {
const fadeTop = fade.getBoundingClientRect().top;
if(fadeTop < triggerBottom) {
fade.classList.add('show');
} else {
fade.classList.remove('show');
}
})
}* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--shade-background: #FAFAFA;
}
ul {
list-style-type: none;
}
body {
background-color: #fff;
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.intro-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.intro-container::before {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(../images/airpods.jpg);
background-size: cover;
background-position:center;
opacity:...