Menu icon Foundation
Equalizer no longer working

I'm using equalizer on the front page of a site I'm working on, and all of a sudden it isn't working anymore. It was working fine and after making some CSS changes I noticed my two columns were no longer equalized.

The site is not yet live. Here is the HTML (it's built in Wordpress using Grunterie theme which is based on Reverie):

<div class="row collapse feature">
            
	<div class="feature-pic small-12 columns">
                
		<article class="post-30 page type-page status-publish has-post-thumbnail hentry" id="post-30">
                    
            <div class="row collapse" data-equalizer>
                        
			    <div class="leftbox small-12 medium-8 columns" data-equalizer-watch>
                            
                    <h1>Title text here</h1>
                                
				    <img width="800" height="300" src="feature.jpg" class="attachment-front-feature wp-post-image" alt="414903_8481" />			    
    			                    
				</div><!-- leftbox -->
                            
	            <div class="small-12 medium-4 columns rightbox" data-equalizer-watch>
                        
                    <h3>Can we help you?</h3>
                            
                    <p>We provide technical advice and support, design, construct, adapt, install and maintain aids to support people with disabilities and their carers.</p>
                            
                    <a class="button  contact-icon   " href="/contact"  target="_self">Contact TADTas today</a>
                            
                </div><!-- rightbox -->
                        
            </div><!-- row -->
                        
	    </article>
                    
    </div><!-- feature-pic -->

</div><!-- feature -->

            

         

Here is the relevant CSS:

.leftbox {
  position: relative;
}

.leftbox h1 {
  position: absolute;
  width: 100%;
  bottom: 0.8em;
  left: 0;
  margin-bottom: 0;
  z-index: 5;
}

.rightbox {
  padding: 1em 1.4em 1em 1.8em;
  position: relative;
}

.rightbox a.button {
  position: absolute;
  bottom: 0;
  left: 1.75em;
}
         

         

Any help with this is appreciated.

Equalizer

I'm using equalizer on the front page of a site I'm working on, and all of a sudden it isn't working anymore. It was working fine and after making some CSS changes I noticed my two columns were no longer equalized.

The site is not yet live. Here is the HTML (it's built in Wordpress using Grunterie theme which is based on Reverie):

<div class="row collapse feature">
            
	<div class="feature-pic small-12 columns">
                
		<article class="post-30 page type-page status-publish has-post-thumbnail hentry" id="post-30">
                    
            <div class="row collapse" data-equalizer>
                        
			    <div class="leftbox small-12 medium-8 columns" data-equalizer-watch>
                            
                    <h1>Title text here</h1>
                                
				    <img width="800" height="300" src="feature.jpg" class="attachment-front-feature wp-post-image" alt="414903_8481" />			    
    			                    
				</div><!-- leftbox -->
                            
	            <div class="small-12 medium-4 columns rightbox" data-equalizer-watch>
                        
                    <h3>Can we help you?</h3>
                            
                    <p>We provide technical advice and support, design, construct, adapt, install and maintain aids to support people with disabilities and their carers.</p>
                            
                    <a class="button  contact-icon   " href="/contact"  target="_self">Contact TADTas today</a>
                            
                </div><!-- rightbox -->
                        
            </div><!-- row -->
                        
	    </article>
                    
    </div><!-- feature-pic -->

</div><!-- feature -->

            

         

Here is the relevant CSS:

.leftbox {
  position: relative;
}

.leftbox h1 {
  position: absolute;
  width: 100%;
  bottom: 0.8em;
  left: 0;
  margin-bottom: 0;
  z-index: 5;
}

.rightbox {
  padding: 1em 1.4em 1em 1.8em;
  position: relative;
}

.rightbox a.button {
  position: absolute;
  bottom: 0;
  left: 1.75em;
}
         

         

Any help with this is appreciated.

sudheer over 5 years ago

please post a fiddle and dont ovveride default css of foundation.
make another custome.css file and include it .
it helps when you update foundation for latter versions