Image gallery not working properly

Question

<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?

Thank you!

add `overflow: hidden` to the container that holds your `.responsive` div-s - it's collapsed to `0` height now — Zoltan Toth, Nov 18 '16 at 17:34
the `
` overlaps your gallery. A shortest way to resolve it is to remove `position: relative;` off its css at line 761 of https://britishairways.000webhostapp.com/css/styles.css — Banzay, Nov 18 '16 at 17:35

Saurav Rastogi · Accepted Answer · 2016-11-18T17:38:56.407

1

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

section {
  display: flex;
}

Visual Reference:

edited Nov 18 '16 at 17:38

answered Nov 18 '16 at 17:36

Saurav Rastogi

8,959
3
25
34

I have more than one section, can I apply this to only one section? – Giacomo Nov 18 '16 at 17:36
1

@GiacomoLawrance Yes! the section in which all the three image gallery items are present. – Saurav Rastogi Nov 18 '16 at 17:37
Thank you so much! – Giacomo Nov 18 '16 at 18:04
1

@GiacomoLawrance It's my pleasure! – Saurav Rastogi Nov 18 '16 at 18:05

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

The section holding the three gallery images has zero height. This, in turn, is because the gallery images have float:left, which takes them out of the layout flow and causes their parent not to use their size in calculating its height.

See How do you keep parents of floated elements from collapsing?

edited May 23 '17 at 12:13

Community

1
1

answered Nov 18 '16 at 17:32

nvioli

3,854
3
16
33

Image gallery not working properly

2 Answers2