CODEWITHSUNDEEP
htmlcssimageresponsive-design
arb
arb

Reputation: 33

Responsive Rows of Photo Thumbnails

I'm converting a table-based layout to CSS. A handful of pages contain a 'photo gallery' with 123x123 thumbnails and captions. Going forward I'll use a different layout, but for past years, I need to stick with this due to system limitations. It also has to be a CSS-only solution.

I've created rows with divs, and using "clear: left;", it breaks down responsively with media queries from rows of 4, to rows of 3, to rows of 2, to single-items at the mobile breakpoint.

In the rows of 2, however, if there is a really long caption next to a shorter caption, it doesn't shift the divs correctly. Two examples can be seen on the codepen page, under "Opening Session", and "Session for All Attendees" and going to mobile view:

code at codepen

Any tips? I feel like I'm missing something obvious, but I've tried everything I can think of.

Thanks!

HTML:

  <div class="row fix-row">
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="fourcolumns">
            <a href="#WM16SATSESSION01.JPG"><img src="http://joopleberry.org/123x123.png" border="0" height="123" width="123" /></a><br />
        <a href="#">High Resolution</a><br />
        <p> Feb. 20<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin at tortor vel dignissim. Aliquam egestas nunc erat, eu ultricies nisl hendrerit ac. Pellentesque placerat pellentesque hendrerit.</p>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="fourcolumns">
        <a href="#WM16SATSESSION02.JPG"><img src="http://joopleberry.org/123x123.png" border="0" height="123" width="123" /></a><br />
        <a href="#">High Resolution</a><br />
        <p> Feb. 20<br /> Pellentesque non dapibus est. Cras facilisis ornare sem, vitae aliquet ante luctus a. Mauris eu tristique lorem. Duis laoreet magna non magna cursus porttitor. </p>
      </div>
    </div>
  </div>

CSS:

.fourcolumns {
  margin-bottom: 30px;
}
.mediaTitle {
  background-color: rgb(234, 234, 234);
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: left;
  }
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: none;
  }
  .fix-row > div:nth-child(4) {
    clear: left;
  }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: none;
  }
  .fix-row > div:nth-child(4) {
    clear: none;
  }
  .fix-row > div:nth-child(5) {
    clear: left;
  }
}

Upvotes: 1

Views: 82

Answers (1)

duvigneau
duvigneau

Reputation: 201

@media only screen and (min-width: 768px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(2n+1) {
    clear: left;
  }
}

This will clear left for every second child counting from the second and should give the desired result.

Upvotes: 1

Related Questions