Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #290431

    Hi guys,

    I’ve updated to the latest version of Enfold (running on EP 3.9.1) and unfortunately this has caused an annoying issue to appear. On the big Easy sliders on my website, there is a 1 pixel gap applied to the edge of the sliders.

    Then the masonry-style gallery (done via Jetpack plugin) at the bottom of that page never goes to the full width of the content area (e.g. compared to the bordered text area above it).

    How do I fix these two issues?

    #290717

    Hi juliuspang!

    Thank you for using the theme.

    Please use this on Quick CSS or custom.css to remove the 1px gap on the slider:

    .avia-slideshow-inner {
    overflow: visible;
    width: 100%;
    }

    Best regards,
    Ismael

    #290746

    Hi Ismael,

    Unfortunately this doesn’t work for me. BTW, I use Chrome as my main browser.

    In Safari, everything appears OK, even without the additional CSS.

    How about the masonry gallery (using the Jetpack plugin) which doesn’t span the full width of the content area?

    I’ve also noticed in the online live demo of Enfold that there is odd spacing in the Masonry Portfolio and the Mixed Full Width Portfolio layouts. Images aren’t aligned perfectly and are off by one or two pixels or have 2 pixel spacing rather than 1 pixel spacing.

    I don’t remember these issues in older versions of Enfold. The one I was using before updating was v2.4.5.

    I think Kriesi needs to release an update soon to solve these issues. I will be reverting back to a previous version if there’s no simple fix for the 1 pixel gap issue.

    #291456

    Hi!

    I’m not seeing any gap on the slider you have on your homepage:

    Can you post a screenshot of your view?

    Best regards,
    Josue

    #291476

    Yep, sure:
    1 pixel gap

    I’m using the latest version of Chrome on Mac OSX Mavericks to view this. The same 1 pixel gap also appears in your demo.

    #291536

    Hi!

    I checked your website on Chrome v35.0.1916.153 and OS X 10.9.4 and i cannot see a gap as well. Please see screenshot here – http://i.imgur.com/w0FXR1I.jpg

    Regards,
    Yigit

    #291573

    Hmm…must be an issue with my system. :(
    I’ll revert back to an older version of Enfold for the time being.

    Thanks for your help and I look forward to the next Enfold update.

    #291574

    Hey!

    You are welcome, let us know if you have any other questions or issues :)

    Best regards,
    Yigit

    #375657
    This reply has been marked as private.
    #375660

    Hey!

    Please try adding following code to Quick CSS

    .html_header_top.html_header_topbar_active.html_header_sticky #top #main {
    padding-top: 118px;
    }

    If that does not help, please post a screenshot of the issue so we can make sure that we are on the same page. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here

    Best regards,
    Yigit

    #375710
    This reply has been marked as private.
    #376769

    Hi!

    I am really sorry but i still cannot see a gap. Could you please put a big red arrow on your screenshot and show? I compared screenshots but still nothing

    Best regards,
    Yigit

    #376833

    Hey!

    No problem, since it is a 1px gap, it is really hard to see. I made a GIF and marked the spots with red color (the picture itself gains 1px in height and the navigation-circles move down 1px. You should now be able to see it: http://i.imgur.com/ROILxDJ.gif

    Just after the JS writes the inline-css for the element <ul class="avia-slideshow-inner" style="padding: 0px; height: 372px;"> the gap appears. (here I mean, that the JS adds height: 372px;.

    After the second image-slide appeared, it does not happen again. This is because the inline-css “height: 372px” was added to the ul-tag.

    You may see that the 1px gap moves the whole content down for 1px, but only when slide1 changes to slide2.

    Cheers!

    • This reply was modified 9 years, 10 months ago by parperei. Reason: correction
    #376847

    Hi!

    Thanks :) Can you please try adding following code to Quick CSS

    ul.avia-slideshow-inner {
    height: auto!important;
    }

    Best regards,
    Yigit

    #376877

    Hi Yigit,

    thank you so much. This snippet did the trick!

    Issue solved.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Slider 1 pixel gap and Full-width masonry gallery’ is closed to new replies.