Menu icon Foundation
Orbit not moving content below up to fill space of smaller image

In foundation 5 I'd been using Jquery Cycle but thought I'd give Orbit a go this time. Trouble is I'm having this really annoying issue where when you resize the window the content below doesn't move up to fill the gap that is left when resizing, so I just end up with a huge white gap. If you refresh the page at the new size, all good.

This all works fine on a non orbit single image, resizes perfectly and things move accordingly. Just wondering if anyone has the same issue and how to solve it. 

I think my code is right: 

 

@if($banners)
    <div class="row algin-middle">
        <div class="small-16 columns text-center">
            <div class="orbit" role="region" aria-label="Information" data-orbit data-options="animInFromRight: fade-in; animInFromLeft: fade-in; animOutToRight: fade-out; animOutToLeft: fade-out">
                <ul class="orbit-container">

                    <?php $i = 1; ?>
                    @foreach($banners as $k => $v)
                        <li class="{{ ($i==1) ? 'is-active' : '' }} orbit-slide">
                            <div>
                                <a href="{{ $v['link'] or false }}">
                                    <img src="{{ asset($v['small']) }}"
                                         data-src="{{ asset($v['small']) }}"
                                         data-src-retina="{{ asset($v['retina']) }}"
                                         alt="{{ $v['title'] }}"
                                         width="807px"
                                         height="298px"
                                         class="monitor-clicks" />
                                </a>
                            </div>
                        </li>
                        <?php $i = $i + 1 ?>
                    @endforeach

                </ul>
            </div>
        </div>{{-- end columns --}}
    </div>{{-- end row --}}
@endif

Excuse the foreach's and {{ i'm using laravel blade to load things up but the div's/uls etc are (i believe as the docs say).

 

Any help is greatly appreciated

OrbitResponsiveimageresizing

In foundation 5 I'd been using Jquery Cycle but thought I'd give Orbit a go this time. Trouble is I'm having this really annoying issue where when you resize the window the content below doesn't move up to fill the gap that is left when resizing, so I just end up with a huge white gap. If you refresh the page at the new size, all good.

This all works fine on a non orbit single image, resizes perfectly and things move accordingly. Just wondering if anyone has the same issue and how to solve it. 

I think my code is right: 

 

@if($banners)
    <div class="row algin-middle">
        <div class="small-16 columns text-center">
            <div class="orbit" role="region" aria-label="Information" data-orbit data-options="animInFromRight: fade-in; animInFromLeft: fade-in; animOutToRight: fade-out; animOutToLeft: fade-out">
                <ul class="orbit-container">

                    <?php $i = 1; ?>
                    @foreach($banners as $k => $v)
                        <li class="{{ ($i==1) ? 'is-active' : '' }} orbit-slide">
                            <div>
                                <a href="{{ $v['link'] or false }}">
                                    <img src="{{ asset($v['small']) }}"
                                         data-src="{{ asset($v['small']) }}"
                                         data-src-retina="{{ asset($v['retina']) }}"
                                         alt="{{ $v['title'] }}"
                                         width="807px"
                                         height="298px"
                                         class="monitor-clicks" />
                                </a>
                            </div>
                        </li>
                        <?php $i = $i + 1 ?>
                    @endforeach

                </ul>
            </div>
        </div>{{-- end columns --}}
    </div>{{-- end row --}}
@endif

Excuse the foreach's and {{ i'm using laravel blade to load things up but the div's/uls etc are (i believe as the docs say).

 

Any help is greatly appreciated