Gaps in gallery of thumbnail images - Support | Kriesi.at

Tagged: gallery, Responsive Layout

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
March 15, 2022 at 2:23 pm #1344568

joschro
Participant

Hello,

I am using the Gallery on one page, and there are gaps in it. Why is that happening, and how do I get the gaps to go away? That is happening in Firefox on my MacBook Pro.

Photography

On mobile phone, there are still gaps for that same gallery, and there are still four columns of thumbnail images, although it would be better if there was one column for mobile phone, and probably two for small tablet and three for large tablet. How can I get that to happen?

Regards,
Jonah

March 15, 2022 at 5:42 pm #1344609

Rikard
Keymaster

Hi Jonah,

I compared the page you linked to in Chrome and Firefox, but I can’t see any difference between the two browsers, and no gaps either. Could you try using a private browser window to see if that helps please? If not, then please provide us with screenshot of the results you are getting on your end.

Best regards,
Rikard

March 15, 2022 at 6:35 pm #1344631

joschro
Participant

Hi, I tried in a Firefox private browser window and there are still gaps in the gallery grid.

Also, how can I set number of columns to 3 for large tablet, 2 for small tablet, and 1 for phone size?

How do I provide a screenshot? I don’t see any attachment button and I cannot drag the image into this window.

March 16, 2022 at 8:47 am #1344687
Ismael
Moderator
Hi,

Thank you for the inquiry

We can see the issue on Firefox MacOS but we are not sure what is causing it. The default css looks correct. To fix the issue temporarily, try to add this css code.
```
.avia-mozilla .avia-gallery-thumb {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
```
Best regards,
Ismael
March 16, 2022 at 6:07 pm #1344768

joschro
Participant

Thank you! That fixed it (temporarily, as you said). I was also getting that same spacing error on my iPhone, but was able to fix it with the code you provided.

Is there a way to set it so there is only 1 column of thumbnail images on the phone, 2 columns for large phone/small tablet and 3 for tablet size screens? I like that there are 4 columns for desktop view.

Regards,
Jonah

March 17, 2022 at 12:52 pm #1344864
Ismael
Moderator
Hi,

Glad to know that the solution is working. To adjust the width of the gallery items on the different screen sizes, try to add this css code.
```
@media only screen and (min-width: 768px) and (max-width: 989px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    width: 50% !important;
  }
}

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    width: 100% !important;
  }
}
```
Best regards,
Ismael
March 17, 2022 at 1:40 pm #1344877
Guenni007
Participant
first – even if the other browsers are doing it well – i would use the flex modell here for all browsers – and for the responsive case – set the items
f.e.:
```
#top #wrap_all .avia-gallery .avia-gallery-thumb {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#top #wrap_all .avia-gallery .avia-gallery-thumb a {
  width: unset !important
}

@media only screen and (min-width: 990px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 0 1 16%
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px)  {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 0 1 25%
  }
}

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 0 1 33%
  }
}

@media only screen and (max-width: 479px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 0 1 49%
  }
}

@media only screen and (max-width: 339px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 1 1 100%  /*** here the images can grow to 100% ( first 1 indicates the item-grow ) ***/
  }
}
```
March 17, 2022 at 1:49 pm #1344882
Guenni007
Participant
and if you decide to only show first 6 Elements on very small screens you can add a rule to the last media query:
```
@media only screen and (max-width: 339px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    flex: 1 1 100%
  }
  
  #top #wrap_all .avia-gallery .avia-gallery-thumb a:nth-of-type(n+7) {
    display: none !important;
  }
}
```
in the lightbox then all images will be present.
March 17, 2022 at 5:57 pm #1344967

joschro
Participant

Thank you! That worked. Another question. In Portfolio Items, I have Display Preview Images set to Image List. I also have captions for each of the Preview Images. I’m wondering if, similar to how it works in Gallery view, the caption could appear on Hover in Image List view, and/or could the caption appear below the image on the left side in the Lightbox. I realize that the second one, the caption appearing in the Lightbox, does not even happen from Gallery view, but it seems like there is space for that on the left side.

Regards,
Jonah

March 18, 2022 at 5:27 am #1345002

Ismael
Moderator

Hi,

Glad to know that the solutions above are working. If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

March 18, 2022 at 5:32 am #1345005

joschro
Participant

Thank you, that makes sense, so you can close this one.

Regards,
Jonah

March 18, 2022 at 1:43 pm #1345072

Ismael
Moderator

Hi,

Thank you for your understanding. We will close this thread for now. See you on the next one.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Gaps in gallery of thumbnail images’ is closed to new replies.