Most of the time it works, sometimes element sits at very bottom

[tsmith0511]

I'm using a Zurb Foundation 5 Shopify theme and 80% of the time my element is vertically aligned however when I reload the page (comm + r) my element sits below the bottom of my parent div. Would love to get this to work, otherwise I think I'd have to resort to media queries, which is not ideal!

Here's my html, some is written in liquid:

{{ 'breathe-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in breathe'}}

              <div class="columns large-9 fade-in">
                <h2>BREATHE THE DIFFERENCE</h2>
                <p>A class 1 medical device with a 3M filter, AIR ALLERGY and AIR TRAVEL are up to 99% effective in defense against airborne viruses, bacteria, pollution, and allergens.</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'discreet-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in discreet'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>DISCREET</h2>
                <p>Nobody will notice you’re wearing it! It’s like your own personal secret agent. License to breathe.</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'natural-remedy-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in natural-remedy'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>DRUG-FREE, LATEX-FREE: A NATURAL REMEDY</h2>
                <p>Instant relief from your breathing related ailments ... without taking any medication! Feel better, breathe better!</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'airflow-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in airflow'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>INCREASES AIRFLOW</h2>
                <p>Increases airflow up to 60%! Thats 38% more than leading nasal strips!</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'theraputic-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in theraputic'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>THERAPEUTIC ESSENTIAL OILS</h2>
                <p>Infused with therapeutic essential oils specifically formulated to provide drug-free relief to common ailments and increase athletic performance.</p>
              </div>
            </div>
          </div>
      </div>
      <div class="small-12 large-4 large-pull-8 columns">
        {{ 'nasal.jpg' | asset_url | img_tag: 'airware' , 'nasal fade-in vertical-center'}}
      </div>
    </div>

And my CSS (I think I got everything, I'd post the site but it's for a client and still in development--maybe I can email you the url?):
.parent {
height: 500px;
}
.columns.small-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important;
}
.columns {
padding-left: 0em;
padding-right: 0em;
float: left;
}
.small-9 {
width: 75%;
}
.overview-copy {
padding-left: 2rem;
}
.large-8 {
position: relative;
width: 66.66667%;
}
.large-4 {
position: relative;
width: 33.33333%;
}
.product [class_="column"] + [class_="column"]:last-child {
float: left;
}

Thanks!

[PaulSpr]

I think the problem is with Liquid, but there is a solution. The plugin detects any images in the element that needs to be centered, adds a load event to it and re-fires the plugin so the element (with image) is vertically centered. But I think that because Liquid adds the image dynamically the load event isn't attached to the image.

Solution 1 is to make sure the plugin is called after Liquid is done doing it's thing.

Solution 2 is the debounceTimeout option that @kontur added. This will delay plugin execution for the set number of milliseconds. This way you can be (more) sure of the image being present when the plugin is fired.

[kontur]

The debounce timeout really does not help with this, it is designed to prevent firing the resize event more than every xx ms.

You could try wrap the addition of the vertical centering in a callback of a plugin called imagesloaded (https://github.com/desandro/imagesloaded). This does check images loading inside a jquery container. You could futhermore call the plugin again after you detect images have loaded.