I’m not understanding this. Sometimes my images in the gallery load being squashed to a 0.5cm thick line.
Here’s the page - gallery.html
It usually happens when the page fully loads (without saved cache). After that, it happens a lot less. I think the problem is that when it is being loaded slowly, the images never “stretch out”, even if the page is done loading. You might feel it if you press CTRL + F5.
I’m using a lightbox feature for which I’ll include a css file.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Rico Barbers Horsham | Professional Hair Salon For Men</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link href="lightbox.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="infoline">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="maintitle">Rico Barbers</p>
</div>
<div class="col-md-8">
<ul>
<li id="phonenumber"><img src="../../images/phone1.png"/><a href="tel:+447490317132"><p>07490317132</p></a></li>
<li id="location"><img src="../../images/mapmarker1.png"/><a href="https://goo.gl/maps/PoxmYpEvG8o" target="_blank"><p>2 The Parade, Caterways, Horsham RH12 2AL</p></a></li>
<li id="location2"><img src="../../images/mapmarker1.png"/><a href="https://goo.gl/maps/PoxmYpEvG8o" target="_blank"><p>2 The Parade, RH12 2AL</p></a></li>
<li id="openingtimes"><img src="../../images/time1.png"/><p>Mon-Sat: 09:00 - 18:00</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header">
<div class="container">
<div class="col-md-12">
<ul>
<a href="../../index.html"><li>Home</li></a>
<a href="#"><li>Gallery</li></a>
<a href="../prices/prices.html"><li>Prices</li></a>
<a href="../contact/contact.html"><li>Contact</li></a>
</ul>
</div>
</div>
</div>
<div class="body">
<div class="container">
<div class="images">
<div class="row">
<a href="../../images/gentleman1.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman1.jpg"/></a>
<a href="../../images/gentleman2.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman2.jpg"/></a>
<a href="../../images/gentleman3.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman3.jpg"/></a>
<a href="../../images/gentleman4.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman4.jpg"/></a>
<a href="../../images/gentleman5.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman5.jpg"/></a>
<a href="../../images/gentleman6.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman6.jpg"/></a>
<a href="../../images/gentleman7.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman7.jpg"/></a>
<a href="../../images/gentleman8.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman8.jpg"/></a>
<a href="../../images/ricoBarbersInside.jpg" data-lightbox="ricobarbers"><img src="../../images/ricoBarbersInsideThumbnail.jpg"/></a>
<a href="../../images/ricoBarbersOutside.jpg" data-lightbox="ricobarbers"><img src="../../images/ricoBarbersOutsideThumbnail.jpg"/></a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p>Copyright © 2018 by Rico Barbers</p>
</div>
</div>
<script src="lightbox-plus-jquery.js"></script>
</body>
</html>
My normal css file:
.infoline {
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #a38763;
}
.infoline ul {
list-style-type: none;
display: inline-block;
margin-top: 20px;
}
.infoline ul li {
display: inline-block;
margin-right: 20px;
}
.infoline img {
width: 20px;
display: inline-block
}
.infoline ul li a {
color: white;
}
.infoline #location p, .infoline #location2 p {
margin-left: 4px;
}
.infoline ul li p {
display: inline-block;
margin-left: 7px;
}
#maintitle {
font-family: 'Berkshire Swash', cursive;
font-size: 40px;
}
.header {
border-bottom: 2px solid #a38763;
background-color: black;
}
.header ul {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
margin-top: 13px;
margin-bottom: 10px;
}
.header ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
font-size: 22px;
padding: 0 10px 0 10px;
margin-top: -10px;
margin-bottom: -10px;
transition: background-color 0.5s ease;
font-family: 'Josefin Sans', sans-serif;
}
.header a {
color: white;
margin-right: 40px;
margin-left: 40px;
}
.header ul li:hover {
text-decoration-style: none;
}
.header ul a:hover {
color: #a38763;
}
.header ul a:focus {
color: #a38763;
}
.header ul a:active {
color: #a38763;
}
#location2 {
display: none;
}
.body {
background: url(../../images/hairmodel2.jpg);
background-size: cover;
background-position: center center;
padding-top: 200px;
padding-bottom: 200px;
}
.images img {
width: 200px;
height: 100%;
text-align: center;
margin-left: 5px;
margin-right: 5px;
border: 2px solid #a38763;
}
.images a {
margin-bottom: 10px;
}
.images {
text-align: center;
}
.images .row {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.footer {
background-color: black;
border-top: 2px solid #a38763;
color: white;
text-align: right;
border-bottom: 2px solid #a38763;
}
.footer p {
margin-top: 30px;
margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
#maintitle {
text-align: center;
}
.header ul li {
display: block;
margin-bottom: 5px;
}
.header ul a:hover {
text-decoration: none;
}
.header ul a:focus {
text-decoration: none;
}
.header ul {
margin: 0 auto;
margin-bottom: -15px;
text-align: center;
}
}
@media only screen and (max-width: 422px) {
#location {
display: none;
}
#location2 {
display: inline-block;
}
}
@media only screen and (max-width: 433px) {
.header ul li {
display: block;
}
}
@media only screen and (min-width: 546px) and (max-width: 740px) {
.infoline .row .col-md-8 {
text-align: center;
}
}
@media only screen and (max-width: 629px) {
.body {
padding-top: 75px;
padding-bottom: 75px;
}
}
Lightbox css file:
html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
position: fixed;
height: 100vh;
width: 100vw;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #4ae;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
I never had this problem when the website was simply on my computer. Only when I put it on the hosting server I started having this issue. At first I was super puzzled because, well, it doesn’t make sense. Now I think I understand something about the problem, it only happens when the page actually takes some time to load, which is going to happen when it isn’t sitting simply on your computer anymore. I don’t know. It’s like it starts loading them, but never finishes.
Any ideas? I’m pretty lost.