JavaScript generated Materialize cards display problem

Question

I have some rendered card to be displayed on a website. All displayed properly, except for the first one. The image for the first card will roll as you scroll the page, and it only takes half of the image space. The rest cards have no problem at all.

<div class="parallax">
{% if object_list.count == 0 %}

Nothing found

{% else %}
<!--   Icon Section   -->
    <div class="row">
    {% for member in object_list %}

        <div class="col s12 m6 l3">
            {% if member.get_image_url %}
            <div class="card medium">
                <div class="card-image">
                    <img src="{{ member.get_image_url }}"/>
                </div>
                <div class="card-content">
                    <span class="card-title  activator">
                        {{ member.title }} <i class="material-icons right">more_vert</i>
                    </span>
                </div>

                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4"> {{member.title}} <i class="material-icons right">close</i></span>
                    <p>{{ member.summary}} </p>
                </div>

                <span class="btn btn-flat"> <a href="{{ member.slug }}/"> find out more </a></span>

            </div> <!-- #endcard -->
            {% endif %}
        </div> <!-- #end col -->

    {% endfor %}

    </div> <!-- #end row -->
    {% endif %}

</div>

I have changed back to the original CSS for Materialize card, still having the same issue. Not sure what to change that affects the first card only, given that all the cards are sharing the same block of HTML code. And, I'm using Django framework if it helps to debug. Any ideas?

Answer 1

I fixed it by removing class="parallax". I guess there's problem in my parallax CSS will figure it out!