Pictures cropped on horizontal gallery

Hi csavalas,

I apologize, I couldn’t figure out why it’s not centering, if you place it in a Color Section, I would suggest adding an ID to the Section ID field, you can put it mygallery then replace the code I gave you to:

@media only screen and (max-width:767px) {
  #top  #mygallery .av-horizontal-gallery {
    overflow: visible !important;
    min-height: 214px !important;
    margin-bottom: 60px;
  }

  #top #mygallery .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
    max-width: 30vw;
    overflow: visible !important;
  }

  #top #mygallery .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap.av-active-gal-item {
    max-width: 40vw;
  }

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

  #top #mygallery .av-active-gal-item .av-horizontal-gallery-img {
    top: -30px !important;
  }

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

Let us know if this helps :)

Best regards,
Nikko

Hi,

Hmm, Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Nikko

Hi,

I have modified it, this is the code in Quick CSS now:

@media only screen and (max-width:767px) {
  #top  #mygallery .av-horizontal-gallery {
    overflow: visible !important;
    min-height: 214px !important;
    margin-bottom: 60px;
  }

  #top #mygallery .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap {
    max-width: 30vw;
    overflow: visible !important;
  }

  #top #mygallery .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap.av-active-gal-item {
    max-width: 40vw;
  }

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

  #top #mygallery .av-active-gal-item .av-horizontal-gallery-img {
    top: -30px !important;
  }

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

Let us know if it’s good or if changes are still needed :)

Best regards,
Nikko

Hi csavalas,

I had a final look and finally figured it out, the columns should be the same size and that was causing the issue, I have updated the css code in Quick CSS and this is the right code:

@media only screen and (max-width:767px) {
  #top  #mygallery .av-horizontal-gallery {
    overflow: visible !important;
    min-height: 214px !important;
    margin-bottom: 60px;
  }

  #top #mygallery .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap {
   margin-left: 1.1666667vw;
   margin-right: 1.1666667vw;
    max-width: 32vw;
    overflow: visible !important;
  }

  #top #mygallery .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap.av-active-gal-item {
    z-index: 2;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }

  #top #mygallery .av-horizontal-gallery-img {
    top: 0 !important;
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
  }
  #top #mygallery .avia-slideshow-controls a {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

If it’s all good you can remove the access you gave :) let us know if you still need further assistance.

Best regards,
Nikko

Hi,

You’re welcome, I think it’s fine to put it in the public content :) I checked it, the loading icon was centered until the cute little puppy pops out (image in private content) which pushes it down.

Best regards,
Nikko

Hi,

I see, can you try adding this css code in Quick CSS:

@media only screen and (max-width:479px) {
  #top img.av-preloading-logo {
    max-width: 90%;
  }
}

Let us know if this helps :)

Best regards,
Nikko

Hi,

You’re welcome and glad we could help :) Let us know if you need further assistance.

Best regards,
Nikko

Hi oladigital_co,

Can you give us the link to the page you are working with? so we can tweak the code for you.

Best regards,
Nikko

Hi oladigital_co,

Thanks for giving us admin access.
I have added this CSS code in Quick CSS:

@media only screen and (max-width:767px) {
  #top.single-portfolio #section-container-width .av-horizontal-gallery {
    overflow: visible !important;
    min-height: 290px !important;
    margin-bottom: 20px;
  }

  #top.single-portfolio #section-container-width .av-horizontal-gallery .av-horizontal-gallery-wrap {
    max-width: 100vw;
  }

  #top.single-portfolio #section-container-width .avia-slideshow-controls {
    display: block !important;
  }

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

  #top.single-portfolio #section-container-width .avia-slideshow-controls a:before {
    padding: 0 !important;
  }
}

Let us know if you need any modification to it.

Best regards,
Nikko