Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1226224

    hi guys, i’m using the horizontal gallery slider but the top part is being cut off on mobile and i’m not sure how to fix it. help would be much apprecaited!

    #1226640

    Hey bobfurgo,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    .responsive .av-horizontal-gallery-img {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    }

    Best regards,
    Rikard

    #1226763

    Thank you rikard! you are awesome! it does seem to still be cropping the bottom area though, not sure how to resolve that if you can help? thanks again :)

    #1226865

    Hi,

    Add this to quick css:

    
    @media only screen and (max-width: 767px) {
    #img-gallery-home{
    padding-top:0px!important;
    padding-bottom:0px!important;
    }}

    Best regards,
    Jordan Shannon

    #1245567

    Hi Jordan! Sorry for the delay and thanks for sending. However it doesn’t look like that resolved the issue, the first slide is still way pushed down. I cleared me cache and everything so not sure what it is…Can you help? Sorry again for the delay.

    #1245909

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
    .responsive .av-horizontal-gallery-img {
        top: 0;
    }
    }

    Best regards,
    Rikard

    #1246117

    thank you! However it also looks like the full slide isn’t showing, part of the bottom is hidden. Can you help me show the full slide?

    #1246323

    Hi,

    The image used in the slider is the one in private, I can’t see anything missing from the one on the front end compared to that?

    Best regards,
    Rikard

    #1246341

    Not sure what you mean by that.

    When you view the site on mobile, part of the slider is cut off on the bottom and i’m not sure why. I figure some css edits will fix that but can’t identify which code to change.

    #1246457

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
    .responsive .av-horizontal-gallery-inner {
        min-height: 215px;
    }
    }

    Best regards,
    Rikard

    #1246535

    Thanks Rikard! That worked perfectly! I have another question related to the horizontal gallery. When rotating the images to the left, is it possible to hide the arrow on the right when it has reached the last slide? Same with when you rotate images to the right and it hits the last slide, are we able to remove the left arrow in this case? OR if this is not possible, can we make it so the images loop?

    #1251164

    Hi,
    Sorry for the very late reply, to make the next and previous arrows hide on the first and last slide you could use this script to count the slides and then add classes to the first and last and then hide or show the arrows based on those classes. Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_horizontal_gallery_script(){
      ?>
      <script>
    (function($){
      $(window).load(function(){
    var lis = $('.av-horizontal-gallery-slider .av-horizontal-gallery-wrap').length;
    var hgs = $('.av-horizontal-gallery-slider .av-horizontal-gallery-wrap');
    var prev = $('.av-horizontal-gallery .av-horizontal-gallery-prev');
    var next = $('.av-horizontal-gallery .av-horizontal-gallery-next');
    
    $('.av-horizontal-gallery-slider .av-horizontal-gallery-wrap').each(function(index){
        if(index<1)$(this).addClass('first');
        if(index>=lis-1)$(this).addClass('last');
    })
    $('.avia-slideshow-arrows a').click(function(){
    if (hgs.is('.first.av-active-gal-item')){
    	prev.css({'display' : 'none'});
    }else{
    	prev.css({'display' : 'block'});
    }
    if (hgs.is('.last.av-active-gal-item')){
    	next.css({'display' : 'none'});
    }else{
    	next.css({'display' : 'block'});
    }
    });
    	
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_horizontal_gallery_script');

    Best regards,
    Mike

    #1251168

    wow thank you Mike! It looks like it’s working great but when going right all the way to the last slide, and then going back left, the right arrow doesn’t appear again to be able to go right. I tried adding some css but wasn’t able to fix that. Can you help with this as well by chance? Thank you so much!

    #1251399

    Hi,
    Thanks for the feedback, but when I check the page the arrows show correctly, is this occurring on mobile or desktop, and which browser?

    Best regards,
    Mike

    #1251432

    On desktop in chrome. The arrows are showing correctly but again when i go all the way to the end using the right arrow, and then use the left arrow once the right arrow disappears, the right arrow doesn’t appear again when it should. Does that make sense?

    #1251709

    Hi,
    Thank you for the feedback, I understand but I’m not experiencing this, I tested with Chrome on Windows & Mac, please see the video in the Private Content area.
    Did you try an incognito window and clearing your cache?
    I’m using:
    Chrome Version 86.0.4240.75 (Official Build) (64-bit)

    One possible solution would be to change the code above to use “opacity” instead of “display”, but I would prefer to recreate your error to ensure it’s not just you if that makes sense.

    Best regards,
    Mike

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.