I want to add a class clear after the 3rd li element on a gallery page, it's already got couch integrated but can't work it out. I tried copying the idea from another page I done but think I am getting confused due to the gallery having folders

I want it to be like the following

Code: Select all

<li>
                  <a href="https://www.norfolkyfc.co.uk/gallery.php?f=2">
                     <img alt="Campout 2019" src="https://www.norfolkyfc.co.uk/cms/uploads/image/gallery/2019-group-photo.JPG"/>                      
                      <button class="btn btn-primary btn-large">Campout 2019</button>
                     <span class="count_images">89 images</span>
                  </a>
                
               </li>
                            
                                                                                              
               <li>
                  <a href="https://www.norfolkyfc.co.uk/gallery.php?f=1">
                     <img alt="Farm Event 2019" src="https://www.norfolkyfc.co.uk/cms/uploads/image/gallery/wymondham-winners.jpg"/>                      
                      <button class="btn btn-primary btn-large">Farm Event 2019</button>
                     <span class="count_images">55 images</span>
                  </a>
                
               </li>
                            
                                                                                              
               <li>
                  <a href="https://www.norfolkyfc.co.uk/gallery.php?f=3">
                     <img alt="Rally 2018" src="https://www.norfolkyfc.co.uk/cms/uploads/image/rally-2018-egg-catching.jpg"/>                      
                      <button class="btn btn-primary btn-large">Rally 2018</button>
                     <span class="count_images">375 images</span>
                  </a>
                
               </li>
<div class="clear">&nbsp;</div>

When I add in the my_count and k_total_records etc cms tags like the following

Code: Select all

<cms:set my_count="<cms:zebra '1' '2' '3' />" />
                <cms:if my_count='1'>
<li>
</cms:if>
                  <a href="<cms:show k_folder_link />">
                     <img alt="<cms:show k_folder_title />" src="<cms:show my_folder_image />"/>                      
                      <button class="btn btn-primary btn-large"><cms:show k_folder_title /></button>
                     <span class="count_images"><cms:show k_folder_totalpagecount /> images</span>
                  </a>
<cms:if my_count='3' || k_count=k_total_records>
               </li>
<div class="clear">&nbsp;</div>
            </cms:if>

It's adding the

Code: Select all

<div class="clear">&nbsp;</div>

after every li element

The whole gallery section code is below

Code: Select all

<section id="portfolio" class="container main">    
        <ul class="gallery col-4">
            
            <cms:if k_is_list >

<cms:set my_page="<cms:gpc 'pg' method='get' />" />
      <cms:if my_page lt '2' >
          
         <ul class="gallery folders">
             
            <cms:folders childof=k_folder_name hierarchical='1' depth='1'>
                
               <cms:set my_folder_image="" />
               <cms:if k_folder_image>
                  <cms:set my_folder_image=k_folder_image />
               <cms:else />
                  <cms:pages folder=k_folder_name include_subfolders='0' limit='1'>
                      <cms:set my_folder_image=my_thumb_2 scope='parent' />
                  </cms:pages>
               </cms:if>
               <cms:if my_folder_image=''><cms:set my_folder_image="<cms:show k_admin_link />theme/images/empty-folder.gif" /></cms:if>
                
               <li>
                  <a href="<cms:show k_folder_link />">
                     <img alt="<cms:show k_folder_title />" src="<cms:show my_folder_image />"/>                      
                      <button class="btn btn-primary btn-large"><cms:show k_folder_title /></button>
                     <span class="count_images"><cms:show k_folder_totalpagecount /> images</span>
                  </a>
                
               </li>
            </cms:folders>        
         </ul>
      </cms:if>
            
            <cms:pages folder=k_folder_name include_subfolders='0' limit='18' paginate='1'>
            <li>
                <div class="preview">
                    <img src="<cms:show gg_thumb />" alt="">
                    <div class="overlay">
                    </div>
                    <div class="links">
                        <a data-toggle="modal" href="#modal-<cms:show k_count />"><i class="icon-eye-open"></i></a>                                
                    </div>
                </div>
                <div id="modal-<cms:show k_count />" class="modal hide fade">
                    <a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
                    <div class="modal-body">
                        <img src="<cms:show gg_image />" alt=" " width="100%" style="max-height:400px">
                    </div>
                </div>                 
            </li>
            </cms:pages>
        </ul>
            
            <cms:else /><!-- k_is_page -->   
      
      <div id="image_container">
         <img alt="<cms:show k_page_title />" src="<cms:show gg_image />"/>
      </div>
      
   </cms:if>
            
    </section>

UPDATE: Sorry I did a alternative way and added height: 320px; to the css and is ok now