Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 12, 2014 at 2:06 pm #290431
    JP

    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?

    July 13, 2014 at 5:10 am #290717
    Ismael

    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

    July 13, 2014 at 9:01 am #290746
    JP

    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.

    July 15, 2014 at 9:27 am #291456
    Josue

    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

    July 15, 2014 at 10:21 am #291476
    JP

    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.

    July 15, 2014 at 12:39 pm #291536
    Yigit

    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

    July 15, 2014 at 1:26 pm #291573
    JP

    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.

    July 15, 2014 at 1:32 pm #291574
    Yigit

    Hey!

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

    Best regards,
    Yigit

    January 6, 2015 at 1:52 pm #375657
    parperei
    This reply has been marked as private.
    January 6, 2015 at 1:56 pm #375660
    Yigit

    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

    January 6, 2015 at 3:42 pm #375710
    parperei
    This reply has been marked as private.
    January 8, 2015 at 2:53 pm #376769
    Yigit

    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

    January 8, 2015 at 4:42 pm #376833
    parperei

    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
    January 8, 2015 at 4:50 pm #376847
    Yigit

    Hi!

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

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

    Best regards,
    Yigit

    January 8, 2015 at 5:10 pm #376877
    parperei

    Hi Yigit,

    thank you so much. This snippet did the trick!

    Issue solved.

  • Author
    Posts
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.