Canvas Support

Problem with the repositioning of the grid elements

1 reply · opened Nov 23, 2019

CCesar002Nov 23, 2019

Hi,

For my news page, I'm using the page Package-HTML/HTML/blog-grid-3.html.

The problem is:
As soon as all the elements of the grid have finished being rendered, some of them are on the right side of the image (unwanted situation, see image step1). After a few moments, those elements are moved to the left side (desired position, see image step2), creating a movement effect that I would like to avoid.

To reproduce the situation/error, I've modified the file blog-grid-3.html.
Simply replace the grid code with this:

<!-- Posts
============================================= -->
<div id="posts" class="post-grid grid-container grid-3 clearfix" data-layout="fitRows">

    <div class="entry clearfix">
        <div class="entry-image">
            <a href="images/blog/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 10th Feb 2014</li>
            <li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
            <li><a href="#"><i class="icon-camera-retro"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image">
            <iframe src="http://player.vimeo.com/video/87701971" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single-full.html">This is a Standard post with a Vimeo Video</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 16th Feb 2014</li>
            <li><a href="blog-single-full.html#comments"><i class="icon-comments"></i> 19</a></li>
            <li><a href="#"><i class="icon-film"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single-full.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image">
            <div class="fslider" data-arrows="false" data-lightbox="gallery">
                <div class="flexslider">
                    <div class="slider-wrap">
                        <div class="slide"><a href="images/blog/full/10.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/10.jpg" alt="Standard Post with Gallery"></a></div>
                        <div class="slide"><a href="images/blog/full/20.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/20.jpg" alt="Standard Post with Gallery"></a></div>
                        <div class="slide"><a href="images/blog/full/21.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/21.jpg" alt="Standard Post with Gallery"></a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single-small.html">This is a Standard post with a Slider Gallery</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 24th Feb 2014</li>
            <li><a href="blog-single-small.html#comments"><i class="icon-comments"></i> 21</a></li>
            <li><a href="#"><i class="icon-picture"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single-small.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image clearfix">
            <div class="fslider" data-animation="fade" data-pagi="false" data-lightbox="gallery">
                <div class="flexslider">
                    <div class="slider-wrap">
                        <div class="slide"><a href="images/blog/full/2.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/2.jpg" alt="Standard Post with Gallery"></a></div>
                        <div class="slide"><a href="images/blog/full/3.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/3.jpg" alt="Standard Post with Gallery"></a></div>
                        <div class="slide"><a href="images/blog/full/12.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/12.jpg" alt="Standard Post with Gallery"></a></div>
                        <div class="slide"><a href="images/blog/full/13.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/blog/grid/13.jpg" alt="Standard Post with Gallery"></a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single-thumbs.html">This is a Standard post with Fade Gallery</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 3rd Mar 2014</li>
            <li><a href="blog-single-thumbs.html#comments"><i class="icon-comments"></i> 21</a></li>
            <li><a href="#"><i class="icon-picture"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single-thumbs.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image clearfix">
            <iframe width="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/115823769&auto_play=false&hide_related=true&visual=true"></iframe>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single.html">This is an Embedded Audio Post</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 28th Apr 2014</li>
            <li><a href="blog-single.html#comments"><i class="icon-comments"></i> 16</a></li>
            <li><a href="#"><i class="icon-music2"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/SZEflIVnhH8" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single-full.html">This is a Standard post with a Youtube Video</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 30th Apr 2014</li>
            <li><a href="blog-single-full.html#comments"><i class="icon-comments"></i> 34</a></li>
            <li><a href="#"><i class="icon-film"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single-full.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image">
            <a href="images/blog/full/1.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/1.jpg" alt="Standard Post with Image"></a>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single.html">This is a Standard post with another Preview Image</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 5th May 2014</li>
            <li><a href="blog-single.html#comments"><i class="icon-comments"></i> 6</a></li>
            <li><a href="#"><i class="icon-camera-retro"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image">
            <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/x18murk" allowfullscreen></iframe>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single-full.html">This is a Standard post with a Dailymotion Video</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 11th May 2014</li>
            <li><a href="blog-single-full.html#comments"><i class="icon-comments"></i> 9</a></li>
            <li><a href="#"><i class="icon-film"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single-full.html"class="more-link">Read More</a>
        </div>
    </div>

    <div class="entry clearfix">
        <div class="entry-image clearfix">
            <iframe width="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/17521446&auto_play=false&hide_related=false&visual=true"></iframe>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single.html">This is another Embedded Audio Post</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> 15th May 2014</li>
            <li><a href="blog-single.html#comments"><i class="icon-comments"></i> 2</a></li>
            <li><a href="#"><i class="icon-music2"></i></a></li>
        </ul>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
            <a href="blog-single.html"class="more-link">Read More</a>
        </div>
    </div>

</div><!-- #posts end -->

Thank you

SSemicolon WebSTAFFNov 25, 2019

Hello,

Unfortunately, as we are currently unable to check the Codes locally, it is recommended if you can please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Additionally, you can consider adding the data-transition="0s" Attribute to the .grid-container Element to disable the Animation.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard