1

My Problem

I'm trying to make a photo gallery with a title underneath it for each image. But the issue I am encountering is that the title keeps floating next to the image. For Reference see this screenshot.

CSS Snippet

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Any help on how to fix this please.

Gerrit Halfmann
  • 1,332
  • 8
  • 17
RaytjeKn
  • 51
  • 1
  • 6

3 Answers3

0

You have .gallery floated, so it's popping out of normal flow of HTML and parent does not know actual height of child elements. Your .boxGallery needs "clear-fix" to clear it's height for floated elements:

.boxGallery:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

More about it here

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50;
  }
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery:after {
  display: block;
  content: "";
  clear: both;
  position: relative;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • Hey thanks that worked! The only problem I'm having right now tho is that I want multiple images next to eachother according to the width of the page and center those images. What happends now is only 2 images are next to eachother on full widt of my page: https://imgur.com/a/MZ7Qeff . And when The page is smaller it seems the images aren't centered correctly : https://imgur.com/a/81UQhPs . – RaytjeKn Oct 23 '18 at 09:19
0

Because you are floating the elements inside .boxGallery the parent item loses its dimensions (because it doesn't take floated content into account anymore). Because the children are floated, the title gets positioned as a 'filler' for the floats.

You can solve this by a so-called clearfix. These days a clearfix is as easy as:

.clearfixme::after {
    content: '';
    clear: both;
    display: table;
}


@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: auto;
    margin-right: auto;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery::after {
content: '';
clear: both;
display: table;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Alternatively, I'd use flex for this. How I would do it:

.boxGallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery {
  min-width: 120px;
  width: 25%;
  margin: 12px;
}

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

.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • Hey thanks that worked! The only problem I'm having right now tho is that I want multiple images next to eachother according to the width of the page and center those images. What happends now is only 2 images are next to eachother on full widt of my page: imgur.com/a/MZ7Qeff . And when The page is smaller it seems the images aren't centered correctly : imgur.com/a/81UQhPs . – RaytjeKn Oct 23 '18 at 09:29
  • @RaytjeKn That happens because you only have two images in your `.boxGallery`. Just add more. – Bram Vanroy Oct 23 '18 at 09:42
  • By the way, I don't think you want this: ` .boxGallery {margin-left: 50%; margin-right: 50; }` That `50` is not a valid value anyway. I think you want `margin: auto`. – Bram Vanroy Oct 23 '18 at 09:44
  • See the added, second snippet – Bram Vanroy Oct 23 '18 at 09:51
  • I took a look at both snippits. They both seem to work, but I still have the problem that they are not correctly centered: https://imgur.com/a/q5WZP4O. – RaytjeKn Oct 23 '18 at 16:09
  • @RaytjeKn Add `justify-content: center;` to `.boxGallery`. (Second snippet in the answer updated.) – Bram Vanroy Oct 23 '18 at 16:18
  • Using your second snippit the images are all below eachother. – RaytjeKn Oct 23 '18 at 18:44
  • That's not true. Run it here on SO, you'll see they're next to each other. – Bram Vanroy Oct 23 '18 at 19:54
  • When I run it, it doesn't show it like that. What could be causing that? – RaytjeKn Oct 23 '18 at 20:03
  • Are you looking at this with a phone or small tablet or something? When there is not enough room to show the items next to each other (and the margins between them) they will wrap to the next row. On small screen widths, it'll thus show one-per-one. I edited the snippet to make use of the full width of the screen rather than just 80% as was in your original post. You can try changing the 'margin' values and width values of `.gallery` to your liking. – Bram Vanroy Oct 23 '18 at 20:20
  • Sorry I really can't get it to work. https://hinkelaar.nl/pages/foto.html . That is the website I'm working on. – RaytjeKn Oct 23 '18 at 20:32
  • It works fine here on SO, and it works fine on your website on large resolutions (three to two pics). Between 1102 and 995 pixels (or thereabout) only one picture is shown. I'm assuming this is an issue with bootstrap. In any case, it is an issue with the container element of the gallery and the width that is available. It is outside the scope of this question, as this answer has been correctly answered. I advise you to debug (and get a bigger monitor to develop on! 1024px is really too small to develop anything on these days) by going over the container element down to the gallery. – Bram Vanroy Oct 24 '18 at 08:16
0

Since you have floated the images they are taken out of normal flow and .boxGallery element acts like they are not there anymore and only acknowledges the .desc element. To fix this you need to add a clear fix as I have done below:

.boxGallery::after {
  content: "";
  display: table;
  clear: both;
}

You can read more about 'clearfixing' here

To center the images, add a media query at the breakpoint where the viewport is not large enough to allow the images to sit next to each other I found this is the case when the viewport is below 666px, at this point remove the float and center the images with margins.

@media screen and (max-width: 666px) {
  div.gallery {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

See the demo below:

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50%;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery::after {
  content: "";
  display: table;
  clear: both;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

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

@media screen and (max-width: 666px) {
  div.gallery {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>
Danny
  • 1,083
  • 2
  • 8
  • 12