This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

SiteOrigin Slider widget – image sizing and overlap

Resolved 12 replies pluginplugin-widgets-bundle
michael
10 years ago · Last reply by LuBevilacqua 9 years ago

Hi,
I’m using the SiteOrigin Slider widget, but am noticing some strange image-sizing issues. Basically the slider appears to expand slightly height-wise as the second image is shown, and from that point on 2 copies of each image are visible – one (applied as the background image of the slider element) slightly larger than the other (which is an child of an element linking to the related post for that image), resulting in an overlap of these 2 identical (but differently sized image). This effect may or may not be visible, depending on the image itself (a number of our slider images have fairly uniform lower boundaries, so this effect isn’t really visible – but for some images it can be quite obvious).

If I set the visibility attribute of the element to ‘hidden’, then the mis-sizing is no longer visible, but the images no longer link to the relevant posts – so not really an option.

I’m hoping that this is just a simple fix, due to me mis-using the slider widget in some way – but have tried a range of different settings to no effect. If anyone has any ideas or explanation as to why this is happening – and in particular anything I can do to fix this – then that would be greatly appreciated!

Many thanks!

URL: http://www.hipflaskapp.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 10 years, 6 months ago

    Hi Michael

    Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.

    https://siteorigin.com/about/forum-thread-prioritization/

    Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.

  2. michael 10 years, 6 months ago

    No worries Andrew,

    Yes, we’re still having the issue with the slider widget. At the moment we’re just running with it as is, but it’s definitely not ideal.

    Thanks,
    Michael

  3. Andrew Misplon Staff 10 years, 6 months ago

    Thanks for the update. This might be a theme specific issue, first time we’ve seen it. Please, try the following at Appearance > Custom CSS to hotfix:

    /* SiteOrigin Slider Widget */
.so-widget-sow-slider img { display:block !important; }

    Let us know how that goes.

    Thanks

  4. michael 10 years, 6 months ago

    Hi Andrew,

    That hotfix seems to have solved the issue we were seeing with the 2 images overlaying each other – thanks!

    We’re still seeing the strange resizing issue (where the slider expands slightly height-wise and the second image loads in – but this is fairly minor.

    We’re using a SiteOrigin theme (Origami Premium) as a base.

  5. Andrew Misplon Staff 10 years, 6 months ago

    Could you perhaps send the browser details you’re testing in. We’re not able to replicate the jump/expansion issue. Thanks :)

  6. michael 10 years, 6 months ago

    No worries Andrew, and thanks again for your assistance with this.

    I see the resizing issue using both Google Chrome (44.0.2403.155) and Safari (8.0.8) on OSX Yosemite (10.10.5). I’ve also seen this on Chrome for Windows 7. It only seems to occur the first time the slider transitions from the first image to the second image – subsequent transitions, including from the first to second images, don’t show the resizing. All the images are identically sized.

    I’ve screen-captured a video showing the relevant transition, if there’s any way of getting this file to you?

    Michael

  7. Andrew Misplon Staff 10 years, 6 months ago

    Sounds like the best way forward. Depending on the file format you could perhaps upload to your Media Library and send the link. If have Dropbox you could perhaps upload to your Public folder and share the link. You can delete once we’re done.

  8. michael 10 years, 6 months ago

    Thanks Andrew,

    Movie should be available from: https://drive.google.com/file/d/0ByLcJhaIfpBKc3NrdmJNb0o4TUU/view?usp=sharing

  9. Andrew Misplon Staff 10 years, 6 months ago

    Thanks for taking the time to report. Strangely enough I can’t see this in OS X Chrome but I can see it between 1-2 seconds in the video. I’m not sure there is anything we can do to resolve. I think it has to do with the height change as the frames transition. Greg took a look too. Sorry, wish we had more on this.

  10. michael 10 years, 6 months ago

    No worries Andrew – thanks for all your help.

  11. Andrew Misplon Staff 10 years, 6 months ago

    For sure, thanks for your understanding.

  12. LuBevilacqua 9 years, 8 months ago

    Hello,
    I had the same resizing issue between the first and second image transition, and I would like to share the solution.
    As far as I can see, the slider height is based on a non-visible element with class “cycle-sentinel”. Being position: static, it is still influenced by parent’s padding. Parent is a ul, with a default padding of 40px for webkit browsers; removing this padding solves the issue.
    TL;DR:
    Add to your theme CSS this instruction:

    ul.sow-slider-images {
	padding:0;
}

    Hope this helps!
    Best regards
    Luigi

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread