Giacomo Lawrance Giacomo Lawrance - 17 days ago 6
CSS Question

Image gallery not working properly

<section>
<style>
div.img {
border: 1px solid #ccc;
}

div.img:hover {
border: 1px solid #777;
}

div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

* {
box-sizing: border-box;
}

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}

.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>

<div class="responsive">
<div class="img">
<a target="_blank" href="img\aviary-image-1479454871589.jpeg">
<img src="/img/aviary-image-1479454871589.jpeg" alt="A Boeing 747-400 descending" width="300" height="200">
</a>
<div class="desc">A Boeing 747-400 descending</div>
</div>
</div>


<div class="responsive">
<div class="img">
<a target="_blank" href="img\Screenshot_2016-11-18-13-30-35-973.jpg">
<img src="/img/Screenshot_2016-11-18-13-30-35-973.jpg" alt="Boeing 787-9 touching down" width="600" height="400">
</a>
<div class="desc">Boeing 787-9 touching down</div>
</div>
</div>

<div class="responsive">
<div class="img">
<a target="_blank" href="img\Slack for iOS Upload.jpg">
<img src="/img/Slack for iOS Upload.jpg" alt="Boeing 777-200ER climbing" width="600" height="400">
</a>
<div class="desc">A Boeing 777-200ER climbing</div>
</div>
</div>
</section>


Please note, that this is only a section of the page, that is why there are no starting tags etc.

For some reason, my gallery is not loading. The images are uploaded, but none of the gallery is showing up on the site. You can look at the site here: https://britishairways.000webhostapp.com/photos.html

Anything I'm doing wrong?

You can check out the whole code a repo here: https://github.com/GiacomoLaw/british-airways-virtual

The specific file is here: https://github.com/GiacomoLaw/british-airways-virtual/blob/master/photos.html

If you could fork it, and then push request it, that would be really good.

Thank you in advance!

Answer

Make your <section> in which your gallery items are located a flex container. Just like:

section {
  display: flex;
}

Visual Reference:

enter image description here

Comments