Menu icon Foundation
Data-clearing thumbnail problem

Hi, I asked a question a few days ago that got no response and I am still stuck. I thought maybe my question was not clear so I will try again. Why is my responsive image thumbnail no longer responsive after adding the clearing-thumbs class and data clearing attribute to my ul tag? I am setting up the Clearing lightbox feature exactly per the foundation 5 docs—ul, li, a, img—The thumbnails are responsive in list format but as soon as I add the class="clearing-thumbs" and data-clearing... boom, the images are not responsive. ANy thoughts? I'm really stuck. thanks in advance.

<ul class="clearing-thumbs clearing-feature" data-clearing>
    <li class="clearing-featured-img"><a class="th [radius]" href="img/marketingCategoryIntro.jpg"> <img src="img/marketingCategoryIntro-th.jpg"> </a></li> 
    <li><a class="th [radius]" href="img/market1.jpg"> <img src="img/market1-th.jpg"> </a></li>
    <li><a class="th [radius]" href="img/market2.jpg"> <img src="img/market2-th.jpg"> </a></li> 
    <li><a class="th [radius]" href="img/market3.jpg"> <img src="img/market3-th.jpg"> </a></li>  
</ul>
            

         

clearing tumbnailsresponsive thumbnailsclearing lightbox

Hi, I asked a question a few days ago that got no response and I am still stuck. I thought maybe my question was not clear so I will try again. Why is my responsive image thumbnail no longer responsive after adding the clearing-thumbs class and data clearing attribute to my ul tag? I am setting up the Clearing lightbox feature exactly per the foundation 5 docs—ul, li, a, img—The thumbnails are responsive in list format but as soon as I add the class="clearing-thumbs" and data-clearing... boom, the images are not responsive. ANy thoughts? I'm really stuck. thanks in advance.

<ul class="clearing-thumbs clearing-feature" data-clearing>
    <li class="clearing-featured-img"><a class="th [radius]" href="img/marketingCategoryIntro.jpg"> <img src="img/marketingCategoryIntro-th.jpg"> </a></li> 
    <li><a class="th [radius]" href="img/market1.jpg"> <img src="img/market1-th.jpg"> </a></li>
    <li><a class="th [radius]" href="img/market2.jpg"> <img src="img/market2-th.jpg"> </a></li> 
    <li><a class="th [radius]" href="img/market3.jpg"> <img src="img/market3-th.jpg"> </a></li>  
</ul>
            

         
Giorgos Grispos almost 5 years ago

Hi Eileen,

I got exactly same problem, markup is exactly as F5 latest docs however li class="clearing-featured-img" is no responsive.

Any ideas, feedback would be appreciated.

Thx
Giorgos

Clarke over 4 years ago

I am having this issue as well when using:

The visible clearing-featured-images show up in their full size dimensions and are not responsive.

I will add a few weird observations for my situation in case someone can help with more info...

~Everything works fine locally when I view the page. It is not until I deploy the website that the image loses its responsiveness.

~The responsiveness of the image is still honored in Google Chrome (0.0.2214.93 m) and Safari (5.1.7).
It does NOT get honored in Firefox (35.0.1) and IE (10.0.9).

If anyone can help, I would be so grateful! This makes or breaks me using clearing lightbox, and perhaps foundation altogether.

Clarke

Chelsea K Potts almost 4 years ago

I had a problem where the desktop clearing-featured-img was not resizing on my destop, but was properly resizing when previewed on the android mobile devices.

I add one bit of CSS that fixed the problem for me. It is as follows:

 .clearing-feature li.clearing-featured-img {
  max-width:100%;
}

Hopes this helps