I have a question. I am working on a website for my graduation project. I want it to work on every device. On a laptop's full screen it works, but as soon as I resize my screen or if I visit it on my phone the website doesn't scroll or creates a sort of glitch. How I want it to work is that all the images are full size, without any white space in between them on every device and for it to scroll smoothly. My design is below, so you can see what I mean.
You can see here that in the small preview there is already white space in between the images, because it is smaller than a full-screen laptop.
Thanks in regard, Roland
@charset "UTF-8";
/* CSS Document */
h2 {
font-family: 'Niveau Grotesk Regular';
font-style: normal;
font-weight: 300;
font-size: 25px;
color: #383838;
position:fixed;
text-align: center;
align-items: center;
bottom: auto;
z-index: 6;
rotate: 90deg;
}
body,td,th {
font-family: 'Niveau Grotesk Regular';
font-style: normal;
font-weight: 400;
align-content: center;
color: #000000;
font-size: 35px;
}
h1,a{
font-family: 'Niveau Grotesk Regular';
font-style: normal;
font-weight: 300;
font-size: 25px;
text-align: center;
align-items: center;
border-left-width: thick;
color: #000000;
z-index: 6;
rotate: 90deg;
}
.colorbox {
position: fixed;
}
#cboxLoadedContent {
background: #ffffff;
position:fixed;
}
#outline {
position: fixed;
color: #000000;
}
h3{
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
margin: 0;
padding: 0;
color:#000000;
align-content: center;
background-color: #FFFFFF;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
position: static;
}
div#content {
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#box {
position: relative;
vertical-align:top;
width: 100%;
height: 575px;
margin: 0;
padding: 0;
}
.black {
background: black;
}
.white {
background: grey;
}
div#up-left {
position: absolute;
z-index:4;
left: 0;
top: 0px;
width: 50%;
margin: 0;
padding: 0;
}
div#down-right {
position: fixed;
bottom: 0px;
z-index: 5;
left: 50%;
width: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
}
body::-webkit-scrollbar {
display: none;
}<html><head>
<meta charset="UTF-8">
<title>No legs to ground us</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script src="jquery.colorbox-min.js"></script>
<link href="No legs to ground us.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.typekit.net/lma1fez.css">
<link href="colorbox.css" rel="stylesheet" type="text/css">
<style>
@import url("https://use.typekit.net/lma1fez.css");
</style>
</head>
<div id="main-content-desktop"></div>
<div class="top" role="main">
<span>
<h2>
<a href="Context.html" title="Link to poetry"> TEXT </a>
<a href="Video.html" title="Link to video"> VIDEO </a>
<a href="Grid.html" title="Link to Image grid"> GRID </a>
<a href="No legs to ground us.html" title="Link to same page"> PROJECT </a>
<a href="index.htm" title="Link to main website"> ROELANDLENOIR.com </a>
</h2>
</span>
</div>
<body>
<div id="content">
<div id="up-left">
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Baukekopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Benen.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Bloemkopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Brug.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Dawit.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Kijker.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Schaken.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Spoorweg.jpg">
</div>
</div>
<div id="down-right">
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Kwal.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Lamp%20Trein.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Maxkopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Metro%20mankopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Metrokopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Plantenkopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Suzankopie.jpg">
</div>
<div id="box">
<img src="http://roelandlenoir.com/NLTGU/Teije2kopie.jpg">
</div>
</div>
</div>
<script>
var num_children = $('#up-left').children().length;
console.log(num_children);
// Aantal childs: 6
var child_height = $('#up-left').height() / num_children;
console.log(child_height);
// Hoogte van de boxen: 400px
var half_way = num_children * child_height / 2;
console.log(half_way);
// De helft van het scherm: 1200px
$(window).scrollTop(half_way);
// Scrollen naar de helft van het scherm
var ul = '#up-left';
var dr = '#down-right';
function crisscross() {
$(ul).css('bottom', '-' + window.scrollY + 'px');
$(dr).css('bottom', '-' + window.scrollY + 'px');
var ulc = $(ul).children();
var drc = $(dr).children();
var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
// Naar beneden scrollen
if (window.scrollY > half_way + child_height) {
$(window).scrollTop(half_way + child_height);
//Wacht 10ms totdat het scrollen klaar is
setTimeout(function (){
corners[2].appendTo(ul);
corners[0].prependTo(dr);
}, 5);
} else if (window.scrollY < half_way - child_height) {
$(window).scrollTop(half_way - child_height);
//Wacht 10ms totdat het scrollen klaar is
setTimeout(function (){
corners[1].appendTo(dr);
corners[3].prependTo(ul);
}, 5);
}
}
$(window).scroll(crisscross);
</script>
</body>
</html>
Use max-height:575px; instead of height:575px; inside #box{}.Also, add display:grid;
Please run it full screen and resize the window to see the changes.