Pictures cropped on horizontal gallery

Hey fritzves,

Please, can you share with us a screenshot about this issue?

Best regards,
John Torvik

Hi,

And that is happening only to mobile, correct?
Well the issue is because the size of the images on mobile. To make all the content look good – they images are been cutted to parts.

Best regards,
Basilis

Hi fritzves,

This will make it look a bit better :)
Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.av-horizontal-gallery.av-horizontal-gallery-large-gap.av-horizontal-gallery-1.avia-builder-el-2  {
  min-height: 355px;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi fritzves,

I am seeing the whole image now. It is not cropped anymore. Could you please clear the cache, check again and get back to us.

Best regards,
Victoria

Hi,

I have checked it but it doesn’t look cropped on my end, can you post a screenshot how it looks on your end?

Best regards,
Nikko

Hi,

I have checked it but it seems you have already hidden the horizontal gallery in mobile and use masonry as a substitute to the gallery. Let us know if you still need assistance on it.

Best regards,
Nikko

Hi,

Can you try adding this css code in Quick CSS:

@media only screen and (max-width:767px) {
  .av-horizontal-gallery.av-horizontal-gallery-large-gap.av-horizontal-gallery-1.avia-builder-el-5 {
    overflow: visible !important;
  }
}

Let us know if this helps :)

Best regards,
Nikko

Hi csavalas,

Can you give us a link to the page showing your horizontal gallery?

Best regards,
Nikko

Hi,

Thanks, can you try adding this css code in Quick CSS (located in Enfold > General Styling):

.av-horizontal-gallery.av-horizontal-gallery-large-gap.av-horizontal-gallery-1.avia-builder-el-18 {
    min-height: 667px;
}

Hope this helps :)

Best regards,
Nikko

Hi,

It would be too narrow to show few images at once, would it be okay if we just show the prev and next slider controls on mobile so there’s an indicator that there’s other images? just add this css code in Quick CSS:

@media only screen and (max-width:767px) {
  #top .avia-slideshow-controls a {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

Best regards,
Nikko

Hi,

Can you try to replace all the codes I gave to:

@media only screen and (max-width:767px) {
  .av-horizontal-gallery.av-horizontal-gallery-large-gap.av-horizontal-gallery-1.avia-builder-el-18 {
    min-height: 167px;
  }

  #top .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
    max-width: 25vw;
  }

  #top .avia-slideshow-controls a {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

Let us know if this helps, you might need to adjust some of your images and use similar height and width :)

Best regards,
Nikko

Hi,

Hmm, can you try to adding the custom links again and remove the code I gave, let me know if you have done this and I’ll try to write another code that should fix it :)

Best regards,
Nikko

Hi,

Thanks, try adding this css code in Quick CSS:

@media only screen and (max-width:767px) {
  .av-horizontal-gallery.av-horizontal-gallery-large-gap.av-horizontal-gallery-1.avia-builder-el-18 {
    min-height: 215px;
  }

  #top .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
    max-width: 33.34vw;
  }

  #top .av-horizontal-gallery-img {
    top: 0 !important;
    transform: none !important;
  }

  #top .avia-slideshow-controls a {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

Hope this helps :)

Best regards,
Nikko