Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 7, 2018 at 12:21 am #968124
    Kelly Erickson

    Hi Wonderful Enfold team,

    I started a thread not too long ago about customizing the Post Slider to be 100% of width (https://kriesi.at/support/topic/post-slider-customization-2/). I was provided with the following code: 

    #top.home #portfolio .avia-content-slider .slide-entry.av_one_fourth {
    width: 25%!important; 
}

    Works FANTASTIC with just one issue, the mobile version of the slider is quite messy (see link to screenshot in the private content). Is there a way to force the images to display just one at a time with the arrows still in tact? I don’t want to overcomplicate it but any help would be great.

    Thank you so much!

    June 9, 2018 at 9:06 pm #970549
    Mike

    Hey kellyCraftMedia,
    How about making two of the images 50% wide only for mobile, and when they are clicked the slideshow opens:

    @media only screen and (max-width: 767px) { 
#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-1.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-2.av_one_fourth {
    width: 50%!important;
}
#top.home #portfolio article.slide-loop-3,#top.home #portfolio article.slide-loop-4 {
    display:none !important;
}
#top.home #portfolio .container {
    width: 100% !important; 
    max-width: 100%!important; 
}
#top.home #after_section_2 .container .content {
padding-top: 0px !important;
}
}

    Please see screenshot in Private Content area.

    Best regards,
    Mike

    June 9, 2018 at 10:32 pm #970568
    Kelly Erickson

    I love that! We are SO close. When you click to open the gallery, that’s working great. But if you accidentally swipe your finger left over it, you see the four images stacked at the odd sizes. Can we disable the swipe capability?

    THANK YOU!

    June 10, 2018 at 1:42 pm #970763
    Mike

    Hi,
    Well I was not able to disable the swipe capability, but in my tests I was able to improve the swipe capability so that if you swipe though the next two sets of images they display correctly, and if launching the lightbox you can view all 12 images.
    Please replace the above css with this and clear your browser cache to test:

    @media only screen and (max-width: 767px) { 
#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-1.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-2.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-5.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-6.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-9.av_one_fourth,#top.home #portfolio .avia-content-slider article.slide-entry.slide-loop-10.av_one_fourth {
    width: 50%!important; 

}
#top.home #portfolio article.slide-loop-3,#top.home #portfolio article.slide-loop-4,#top.home #portfolio article.slide-loop-7,#top.home #portfolio article.slide-loop-8,#top.home #portfolio article.slide-loop-11,#top.home #portfolio article.slide-loop-12 {
    display:none !important;
}
#top.home #portfolio .container {
    width: 100% !important; 
    max-width: 100%!important; 
}
#top.home #after_section_2 .container .content {
padding-top: 0px !important;
}
}

    Best regards,
    Mike

    June 10, 2018 at 11:23 pm #970897
    Kelly Erickson

    Wow – love it.
    I think we’ve stumbled on something here – I will have to post the details of this in the future requests slash wishlist forum!

    Thank you again.

    June 11, 2018 at 9:20 am #971016
    Rikard

    Hi,

    Thanks for the feedback and I’m glad Mike could help you out :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 11, 2018 at 7:53 pm #971363
    Kelly Erickson

    Hi Rikard,

    I’m hoping you can help me with something else before we close out this topic – but is still related.

    I moved over the site to its actual home under new hosting, and my post slider customization that I made prior (https://kriesi.at/support/topic/post-slider-customization-2/) and the additions you’ve helped me with on the mobile version – well suddenly NONE of those are working.

    Specifically:
    1) The border/line on the bottom is showing, despite the code: 

    #top.home #after_section_2.container_wrap {
    border-top-style: none!important; 
}

    2) The Post Slider is displaying at 100%, but there appears to be padding between the images or just some sort of space in between despite some custom CSS to mitigate that problem.

    3) The mobile version of the portfolio grid is not functioning, at all, with the code you gave me in this thread.

    I’m struggling with trying to figure out why – it’s the same site, just on different hosting. I’ve deactivated all plugins but that doesn’t affect the problems, and I’ve checked that I’m on the latest Enfold version and the latest WordPress. I’ve removed the Quick CSS one at a time to see if there’s any competing code, but there doesn’t appear to be.

    PLEASE HELP! Ack!

    Credentials are in the private content.

    June 12, 2018 at 4:32 am #971497
    Mike

    Hi,
    I took a look and found that your home page doesn’t have the class “home” anymore, instead it has “page-id-318”, so all of the css that referred to “home” had to be changed.
    I did this for you, Please clear your browser cache and check.

    Best regards,
    Mike

    June 12, 2018 at 9:53 pm #971900
    Kelly Erickson

    Amazing how simple this stuff can be!

    THANK YOU THANK YOU THANK YOU

    June 13, 2018 at 3:33 am #972012
    Mike

    Hi,
    We are happy to assist :)
    I look forward to seeing what you build next!
    We will close this now, Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Post Slider Customization – mobile version’ is closed to new replies.