Menu icon Foundation
Images are Clipped when changing Portrait to Landscape / Vice Versa

Undefined

Notice how the Toes of the Shoe are clipped on the first shoe and the second shoe. Sometimes it's much worse as there are even large white gaps where the images are. This corrects itself after your start to scroll (but it takes a moment and is jarring).

Undefined

This is what it looked like before changing the orientation from portrait to landscape.

// the general structure I'm using can be found below. '

<ul class="c5-sm-list ">
    <li class="c5-sm-active">
        <div class="product-item" data-equalizer="prod-14509" data-equalizer-mq="small-only">
            <a href="http://s-tacticalgear.cat5.local/511-tactical-trainer-2-0-mid-wp-black" title="" class="gaProductClickLink_14509">
                <span class="product-image" data-equalizer-watch="prod-14509" style="height: 240px;">
                    <img src="http://assets.cat5.local/images/catalog/products/1/4/5/0/9/0-325-511-tactical-trainer-2-0-mid-wp-black.jpg?v=4192" alt="5.11 Tactical Trainer 2.0 Mid WP Black">
                </span>
                <span class="product-content" data-equalizer-watch="prod-14509" style="height: 240px;">
                    <span class="sale-clearance">Clearance</span>
                    <span class="product-title">5.11 Tactical Trainer 2.0 Mid WP</span>
                    <span class="sale-price">$12.80</span>
                </span>
            </a>
        </div>
    </li>
    <li class="c5-sm-active">
        <div class="product-item" data-equalizer="prod-21630" data-equalizer-mq="small-only">
            <a href="http://s-tacticalgear.cat5.local/511-tactical-recon-trainer-black" title="" class="gaProductClickLink_21630">
                <span class="product-image" data-equalizer-watch="prod-21630" style="height: 240px;">
                    <img src="http://assets.cat5.local/images/catalog/products/2/1/6/3/0/0-325-511-tactical-recon-trainer-black.jpg?v=4192" alt="5.11 Tactical RECON Trainer Black">
                </span>
                <span class="product-content" data-equalizer-watch="prod-21630" style="height: 240px;">
                    <span class="sale-clearance">Clearance</span>
                    <span class="product-title">5.11 Tactical RECON Trainer</span>
                    <span class="sale-price">$72.99</span>
                </span>
            </a>
        </div>
    </li>
</ul>

The layout is complicated depending on small / med / large views. However, it it's simplest form, I'm using a blockgrid for small / med / large views. 1 Product on small / 2 products on small with a gallery view (side by side) 3 products on medium and 4 products on large.

I'm using sass to create my own class structure and using mixins to build the css.

I just can't figure out this rendering issue. I can replicate it on Chrome emulation for iphones, androids and desktops. I don't have a public link as this is a work in progress.

Any suggestions would be much appreciated.

portraitLandscapeblock gridclipped images

Undefined

Notice how the Toes of the Shoe are clipped on the first shoe and the second shoe. Sometimes it's much worse as there are even large white gaps where the images are. This corrects itself after your start to scroll (but it takes a moment and is jarring).

Undefined

This is what it looked like before changing the orientation from portrait to landscape.

// the general structure I'm using can be found below. '

<ul class="c5-sm-list ">
    <li class="c5-sm-active">
        <div class="product-item" data-equalizer="prod-14509" data-equalizer-mq="small-only">
            <a href="http://s-tacticalgear.cat5.local/511-tactical-trainer-2-0-mid-wp-black" title="" class="gaProductClickLink_14509">
                <span class="product-image" data-equalizer-watch="prod-14509" style="height: 240px;">
                    <img src="http://assets.cat5.local/images/catalog/products/1/4/5/0/9/0-325-511-tactical-trainer-2-0-mid-wp-black.jpg?v=4192" alt="5.11 Tactical Trainer 2.0 Mid WP Black">
                </span>
                <span class="product-content" data-equalizer-watch="prod-14509" style="height: 240px;">
                    <span class="sale-clearance">Clearance</span>
                    <span class="product-title">5.11 Tactical Trainer 2.0 Mid WP</span>
                    <span class="sale-price">$12.80</span>
                </span>
            </a>
        </div>
    </li>
    <li class="c5-sm-active">
        <div class="product-item" data-equalizer="prod-21630" data-equalizer-mq="small-only">
            <a href="http://s-tacticalgear.cat5.local/511-tactical-recon-trainer-black" title="" class="gaProductClickLink_21630">
                <span class="product-image" data-equalizer-watch="prod-21630" style="height: 240px;">
                    <img src="http://assets.cat5.local/images/catalog/products/2/1/6/3/0/0-325-511-tactical-recon-trainer-black.jpg?v=4192" alt="5.11 Tactical RECON Trainer Black">
                </span>
                <span class="product-content" data-equalizer-watch="prod-21630" style="height: 240px;">
                    <span class="sale-clearance">Clearance</span>
                    <span class="product-title">5.11 Tactical RECON Trainer</span>
                    <span class="sale-price">$72.99</span>
                </span>
            </a>
        </div>
    </li>
</ul>

The layout is complicated depending on small / med / large views. However, it it's simplest form, I'm using a blockgrid for small / med / large views. 1 Product on small / 2 products on small with a gallery view (side by side) 3 products on medium and 4 products on large.

I'm using sass to create my own class structure and using mixins to build the css.

I just can't figure out this rendering issue. I can replicate it on Chrome emulation for iphones, androids and desktops. I don't have a public link as this is a work in progress.

Any suggestions would be much appreciated.

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

I noticed you are using equalizer. By default, equalizer is turned off when elements stack. This is ideal to prevent huge ugly whitespace. Did you override this in the options?

$(document).foundation({
  equalizer : {
    // Specify if Equalizer should make elements equal height once they become stacked.
    equalize_on_stack: false,
    // Allow equalizer to resize hidden elements
    act_on_hidden_el: false
  }
});

I would probably use padding around the content to space out the items evenly on small screens. How are you doing it?