Featured collection-card height not scaling - Venture theme

Highlighted
New Member
3 0 0

Hi everyone,

I changed the number of items in featured-products from 5 to 3 per row (see the code in red).

 

Now the collection-card (marked blue) is not scaling as the other product-cards. It stays on fixed hight.

 

This is the code for featured-producs.liquid

 

<div class="page-width">
  <div class="section-block">
    {% assign collection = collections[section.settings.collection] %}
    {% assign rows = section.settings.rows %}

    {% if collection != blank %}
      {% assign product_limit = rows | times: 3 | minus: 1 %}

      {% comment %}
        On mobile, show a max of 3 products to fill out the 2x2 grid.
        Turn mobile_product_limit to false to remove that limitation.
      {% endcomment %}
      {% assign mobile_product_limit = true %}
      {% comment %}
        On mobile the 5 column grid leaves a straggler when 1 or 3 rows.
        Hide the straggler according to its index. It's one lower than
        the number of columns because the fist column is a collection card.
        This is only necessary when mobile_product_limit is false.
      {% endcomment %}
      {% case rows %}
        {% when 1 %}
          {% assign product_index_hide_on_mobile = 4 %}
        {% when 3 %}
          {% assign product_index_hide_on_mobile = 14 %}
      {% endcase %}

      <div class="grid grid--no-gutters grid--uniform collection">
        <div class="grid__item small--one-half medium-up--one-third collection__cover">
          {% if collection.image %}
            {% assign collection_image = collection | img_url: '480x480' %}
          {% else %}
            {% assign collection_image = collection.products.first | img_url: '480x480' %}
          {% endif %}
          <a href="{{ collection.url }}" class="collection-card" style="background-image: url({{ collection_image }});">
            <div class="collection-card__meta">
              <p class="h1 collection-card__title">{{ collection.title }}</p>
              <p class="collection-card__subtext">{{ 'collections.general.view_all' | t }}</p>
            </div>
          </a>
        </div>
        {% for product in collection.products limit: product_limit %}
          <div class="grid__item small--one-half medium-up--one-third{% if forloop.index == 1 %} collection__card--first{% endif %} {% if mobile_product_limit and forloop.index > 3 %}small--hide{% elsif rows == 1 or rows == 3 %}{% if forloop.index == product_index_hide_on_mobile %}small--hide{% endif %}{% endif %}">
            {% include 'product-card', product: product, collection: collection %}
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="grid grid--no-gutters grid--uniform collection">
        <div class="grid__item small--one-half medium-up--one-third">
          <a href="{{ collection_object.url }}" class="collection-card">
            <div class="collection-card__meta">
              <p class="h1 collection-card__title">{{ 'homepage.onboarding.collection_title' | t }}</p>
              <p class="collection-card__subtext">{{ 'collections.general.view_all' | t }}</p>
            </div>
          </a>
        </div>
        {% assign product_limit = rows | times: 3 | minus: 1 %}
        {% assign mobile_product_limit = true %}
        {% for i in (1..product_limit) %}
          {% case i %}
            {% when 7 %}
              {% assign index = 1 %}
            {% when 8 %}
              {% assign index = 2 %}
            {% when 9 %}
              {% assign index = 3 %}
            {% else %}
              {% assign index = i %}
          {% endcase %}
          <div class="grid__item small--one-half medium-up--one-third{% if forloop.index == 1 %} collection__card--first{% endif %} {% if mobile_product_limit and forloop.index > 3 %}small--hide{% elsif rows == 1 or rows == 3 %}{% if forloop.index == product_index_hide_on_mobile %}small--hide{% endif %}{% endif %}">
            {% comment %}
              Replica of snippets/product-card.liquid
            {% endcomment %}
            <a href="#" class="product-card">
              <div class="product-card__image-container">
                <div class="product-card__image-wrapper">
                  <div class="product-card__image">
                    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                    {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                </div>
              </div>
              <div class="product-card__info">
                <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                <div class="product-card__price">
                  $19.99
                </div>
              </div>
              <div class="product-card__overlay">
                {% assign view_string_length = 'products.product.view' | t | size %}
                <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>

 

Thanks for your help in advance.

 

0 Likes
Highlighted
Shopify Partner
685 117 335

-share your page url in which you have issue, so that we can have better idea.
thank you

0 Likes
Highlighted
New Member
3 0 0
Highlighted
Shopify Partner
685 117 335

is this the issue you are talking about?
hgf.png

0 Likes
Highlighted
Shopify Partner
685 117 335

@jonas9495  ,

-This is not any code issue, it is just an image size issue.
-your collection-card image has more height than other product images. therefore it is taking more height.
-to solve this issue change collection-card image with another image wich has same height as product image has.
-if you forcefully match the height of all images using CSS then images will be stretched and your website would not look good as it is now.

 

-I hope you understood.
-then like my answer & mark it as an accepted solution

Thank you

0 Likes
Highlighted
New Member
3 0 0

@candiSoft thanks for your help.

 

The picture for the collection-card is pulled automatically from the first product (the iceberg besides).

If I change all pictures to the same height with CSS, I am still missing the height of the product-card__info (with the title and the price).

 

Can you maybe show me, how I can change it?

0 Likes