Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 28, 2020 at 4:56 pm #1226224
    bobfurgo

    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!

    June 30, 2020 at 5:21 am #1226640
    Rikard

    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

    June 30, 2020 at 2:37 pm #1226763
    bobfurgo

    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 :)

    June 30, 2020 at 5:58 pm #1226865
    Jordan Shannon

    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

    September 14, 2020 at 12:33 am #1245567
    bobfurgo

    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.

    September 15, 2020 at 5:06 am #1245909
    Rikard

    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

    September 15, 2020 at 9:02 pm #1246117
    bobfurgo

    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?

    September 16, 2020 at 1:20 pm #1246323
    Rikard

    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

    September 16, 2020 at 2:26 pm #1246341
    bobfurgo

    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.

    September 17, 2020 at 7:56 am #1246457
    Rikard

    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

    September 17, 2020 at 2:15 pm #1246535
    bobfurgo

    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?

    October 7, 2020 at 2:34 pm #1251164
    Mike

    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

    October 7, 2020 at 2:54 pm #1251168
    bobfurgo

    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!

    October 8, 2020 at 12:27 pm #1251399
    Mike

    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

    October 8, 2020 at 2:29 pm #1251432
    bobfurgo

    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?

    October 9, 2020 at 2:09 pm #1251709
    Mike

    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

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