In Zurb Foundation 5.5.3 how do I reduce margin/padding between <li> and the 'shorten" JS plugin

Question

I'm using Zurb Foundation 5.5.3 with CSS (and do not wish to use SASS). I'm running Windows 7. I'm using Jquery Shorten to display a list of languages https://github.com/viralpatel/jquery.shorten

I am trying to reduce the space between the last li with "Azerbaijani transcription and translation" and the following "more". I unsuccessfully tried to target to reduce the margin and padding top or bottom....

See screenshot:

My html code and css are as follows

.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom ul {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}


ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

ul.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul li {
  padding-top: -1.75rem;
  margin-top: -1.75rem;

}

.reducebottom ul li {
  padding-bottom: -5.75rem;
  margin-bottom: -5.75rem;
}

li.reducemargin{
margin: 0px;
}

ul.reducemargin { 
  margin:-20px;
}

.reducemargin ul { 
  margin:-20px;
}

.reducemargin ul li { 
  margin:-20px;
}

ul.noindent {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

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

      <div class="row"> 
         <div class="small-12 medium-12 columns">
          <h4>more languages</h4> 

          <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>

            <div class="medium-4 columns">
            <div class="reducetop reducemargin imagelist">
            <ul class="noindent imagelist">
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li class="reducemargin noindent imagelist">Azerbaijani transcription and translation</li>           
            </ul>
            </div>
            <div class="reducetop reducemargin">
          <ul class="comment-small reducemargin noindent imagelist">
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 
           </div>

         </div> 

          <div class="medium-4 columns comment">
          <ul>
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li>Azerbaijani transcription and translation</li>
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 

         </div> 
          </div>

          </div>

:

This is the shorten plugin script I have in my html.

<script language="javascript">

$(document).ready(function() {

$(".comment").shorten();

$(".comment-small").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-list").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-test").shorten({showChars: 30});  

});

Any help would be much appreciated!

Answer 1

You have a number of bits of code that are redundant in your question above (I'm guessing attached to elsewhere in your site)

e.g.

ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

Where the class reducetop is applied to a div (in your shown code) and some of the jQuery references elements that don't exist in the HTML (e.g. $(".comment-test").shorten({showChars: 30}); etc.

So to help me answer your question I have trimmed the CSS, JS and HTML not related to your problem with the gap in a particular column.

HTML

<div class="row">
  <div class="small-12 medium-12 columns">
    <h4>more languages</h4>
    <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>
    <div class="medium-6 columns end">
      <div class="">
        <ul class="noindent imagelist">
          <li>Albanian transcription and translation</li>
          <li>Amharic transcription and translation</li>
          <li>Arakanese transcription and translation</li>
          <li>Armenian transcription and translation</li>
          <li class="">Azerbaijani transcription and translation</li>
        </ul>
        <ul class="comment-small noindent imagelist">
          <li>Aymara transcription and translation</li>
          <li>Belarusan transcription and translation</li>
          <li>Bengali transcription and translation</li>
          <li>Bhilali transcription and translation</li>
          <li>Burmese transcription and translation</li>
          <li>Cambodian transcription and translation</li>
          <li>Caqchiquel transcription and translation</li>
          <li>Chechen transcription and translation</li>
          <li>Creole transcription and translation</li>
          <li>Dari transcription and translation</li>
          <li>Dinka transcription and translation</li>
          <li>Faroese transcription and translation</li>
          <li>Farsi transcription and translation</li>
          <li>Flemish transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Fulani transcription and translation</li>
          <li>Georgian transcription and translation</li>
          <li>Uzbek transcription and translation</li>
          <li>Greenlandic transcription and translation</li>
          <li>Guarani transcription and translation</li>
          <li>Gujerati transcription and translation</li>
          <li>Hassaniya transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Icelandic transcription and translation</li>
          <li>Inuktitut transcription and translation</li>
        </ul>
      </div>
    </div>
  </div>
</div>

(Just one column, some classes removed and one class applied to relevant uls)

JavaScript / jQuery

$(document).ready(function() {
  $(".comment-small").shorten({
    showChars: 10,
    moreText: 'more',
    lessText: 'less',
    ellipsesText: '...',
  });
}).foundation();

(Same, but with the Foundation initialisation call at the end and cut to only the one list to be "shortened")

CSS

ul.noindent {
  margin-left: 5px;
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 0px;
}

.imagelist {
  padding: 0;
  margin: 0;
}
.shortcontent,
.morelink {
  float: left;
}

So basically: If you remove all the css related to padding or margins applied to elements which are parents and children of the lists, then pick a class for your ul elements that will govern the spacing (I've reused your imagelist class for the example) you can set the margin and padding to 0 (or whatever you require).

Then to reduce the (perceived) gap further (it is already 0) you can stack the ellipsis and "more" span on the same line using the classes that jQuery.Shortening adds to created elements:

.shortcontent,
.morelink {
  float: left;
}

You could also pad the .shortcontent (ellipsis) to create a horizontal gap between the elements if required.

Here's a working example: https://jsfiddle.net/tymothytym/0dvf2gzk/

Answer 2

As @tymothytym clarified in chat part of the issue I was having was due to the Chrome cache bug - per his suggestion I followed the directions from Chrome WON'T clear cache... ctrl + F5 doesn't seem to work either