Menu icon Foundation
Spacing and Orbit thumbnails using fixed grid

Hey all - I'm deep linking thumbnails under an orbit slider and all is working well. Only thing is that I want no spacing between the thumbnails and keep to rows of 5 always so the fixed grid suits it well (apart from the no spacing requirement).

So I've added this to my css:

.imagelist li {
padding:0;
margin:0; }

So that gives me no spacing bewteen the thumbnails but messes up the left hand padding on the row (see screenshot and code). I need it to line up exactly with the main orbit image.

New to foundation but loving it so far - so apologies if I'm being dumb...

Many thanks

<div class="rv-blue">
  <div class="row">    

<ul class="orbit-container" data-orbit data-options="
    animation:fade;
    timer_speed:3000;
    pause_on_hover:true;
    animation_speed:500;
    navigation_arrows:true;
    bullets:false;
    next_on_click:true;
    slide_number:false;
    timer:true;
    stack_on_small: false;">
      <li data-orbit-slide="52">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F52.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="53">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F53.jpg" alt="Armco IT" />
      <div class="orbit-caption hide-for-small-only"><p>Onscreen mobile campaign for sponsorship opportunity</p></div>
</li>
<li data-orbit-slide="54">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F54.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="55">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F55.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="56">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F56.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="57">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F57.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="58">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F58.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
</ul>
</div>
<div class="row">
  <ul class="imagelist small-block-grid-5 large-12 columns show-for-medium-up ">
     <li><a data-orbit-link="52"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F52.jpg" alt="" /</a></li>
    <li><a data-orbit-link="53"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F53.jpg" alt="Armco IT" /</a></li>
    <li><a data-orbit-link="54"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F54.jpg" alt="" /</a></li>
    <li><a data-orbit-link="55"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F55.jpg" alt="" /</a></li>
    <li><a data-orbit-link="56"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F56.jpg" alt="" /</a></li>
    <li><a data-orbit-link="57"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F57.jpg" alt="" /</a></li>
    <li><a data-orbit-link="58"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F58.jpg" alt="" /</a></li>
  </ul>
</div>
</div>
            

         

Orbitthumbs rv

gridlayoutRows

Hey all - I'm deep linking thumbnails under an orbit slider and all is working well. Only thing is that I want no spacing between the thumbnails and keep to rows of 5 always so the fixed grid suits it well (apart from the no spacing requirement).

So I've added this to my css:

.imagelist li {
padding:0;
margin:0; }

So that gives me no spacing bewteen the thumbnails but messes up the left hand padding on the row (see screenshot and code). I need it to line up exactly with the main orbit image.

New to foundation but loving it so far - so apologies if I'm being dumb...

Many thanks

<div class="rv-blue">
  <div class="row">    

<ul class="orbit-container" data-orbit data-options="
    animation:fade;
    timer_speed:3000;
    pause_on_hover:true;
    animation_speed:500;
    navigation_arrows:true;
    bullets:false;
    next_on_click:true;
    slide_number:false;
    timer:true;
    stack_on_small: false;">
      <li data-orbit-slide="52">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F52.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="53">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F53.jpg" alt="Armco IT" />
      <div class="orbit-caption hide-for-small-only"><p>Onscreen mobile campaign for sponsorship opportunity</p></div>
</li>
<li data-orbit-slide="54">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F54.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="55">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F55.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="56">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F56.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="57">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F57.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
<li data-orbit-slide="58">
      <img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1000&amp;h=400&amp;zc=1&amp;far=&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F58.jpg" alt="" />
      <div class="orbit-caption hide-for-small-only"></div>
</li>
</ul>
</div>
<div class="row">
  <ul class="imagelist small-block-grid-5 large-12 columns show-for-medium-up ">
     <li><a data-orbit-link="52"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F52.jpg" alt="" /</a></li>
    <li><a data-orbit-link="53"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F53.jpg" alt="Armco IT" /</a></li>
    <li><a data-orbit-link="54"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F54.jpg" alt="" /</a></li>
    <li><a data-orbit-link="55"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F55.jpg" alt="" /</a></li>
    <li><a data-orbit-link="56"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F56.jpg" alt="" /</a></li>
    <li><a data-orbit-link="57"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F57.jpg" alt="" /</a></li>
    <li><a data-orbit-link="58"><img src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=200&amp;h=200&amp;zc=1&amp;far=C&amp;q=90&amp;src=http%3A%2F%2Fwww.rv-solutions.co.uk%2Fassets%2Fgallery%2F1%2F58.jpg" alt="" /</a></li>
  </ul>
</div>
</div>
            

         

Orbitthumbs rv
Rafi Benkual almost 6 years ago

One thing I noticed, you shouldn't place you columns class within the UL tag. Once you set it up this way the grid behaves as expected. (also easier to read)
ex:
HTML
<div class="row">
<div class="large-12 small-6 columns">

The block grid css had built in padding because most users do not want images butted up on each other. So to make the blog grid images line up exactly you make the margin 0 fo the UL.

Here your code with some of those changes:
http://cdpn.io/HkCgf

Click edit in the lower left to see code.

PhilW almost 6 years ago

Many thanks Rafi - Excellent!

I knew a guru would be along to make sense of it all!