Portrait/Landscape product photos not aligned in collection page [Dawn Theme 6.0.2]

Store Design
1

Hi,

In the collection page grid on both mobile and desktop, the photo and text is not aligned properly, the product title and photo starts from the top of the container instead of from the bottom if the photo is a landscape orientated photo. I would like to change the alignment such that the text and photo start from the bottom like so.

ISSUE 2.png
ISSUE 2.png1998×1806 421 KB

If needed, website link below.

www.ffcollectibles.com

Thanks

2

@henrycui

can you please send card-product snippet code so i will check and update

3

Sure, i will attach it below for you, thanks alot.

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}
{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}
{% render 'icon-close' %}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}
4

Hi @henrycui ,

Please change all code:

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

  

    

      

        {%- if card_product.featured_media -%}
        

          

            {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
            
            {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

            {%- if card_product.media[1] != nil and show_secondary_image -%}
            
            {%- endif -%}
          

        

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        ### 
          
            {{ card_product.title | escape }}
          
        
        
          {%- if show_vendor -%}
          {{ 'accessibility.vendor' | t }}
          
{{ card_product.vendor }}

          {%- endif -%}

          {{ block.settings.description | escape }}

          {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
          {% liquid
          assign rating_decimal = 0
          assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
          if decimal >= 0.3 and decimal <= 0.7
          assign rating_decimal = 0.5
          elsif decimal > 0.7
          assign rating_decimal = 1
          endif
          %}
          

            
          

          

            {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
          

          

            ({{ card_product.metafields.reviews.rating_count }})
            {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
          

          {%- endif -%}

          {% render 'price', product: card_product, price_class: '' %}
        

      

      {%- if show_quick_add -%}
      
        {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
        {%- if card_product.variants.size == 1 -%}
        
        {%- else -%}
        
        
        {%- endif -%}
      

      {%- endif -%}
      
        {%- if card_product.available == false -%}
        {{ 'products.product.sold_out' | t }}
        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
        {{ 'products.product.on_sale' | t }}
        {%- endif -%}
      

    

  

{%- else -%}

  

    

      

        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
        

      

    

    
      

        ### 
          
            {{ 'onboarding.product_title' | t }}
          
        
        
          {%- if show_vendor -%}
          {{ 'accessibility.vendor' | t }}
          
{{ 'products.product.vendor' | t }}

          {%- endif -%}
          {% render 'price' %}
        

      

    

  

{%- endif -%}

Hope it helps!

5

@henrycui

add this code and let me know

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render 'price', product: card_product, price_class: '' %}

{%- if show_quick_add -%}

{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}

{%- else -%}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}

{%- else -%}

### 

{{ 'onboarding.product_title' | t }}

### 

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%}
{% render 'price' %}

{%- endif -%}
6

Just tried it, didn’t seem to change anything but thank you anyway! Tried another person’s solution and that seemed to do the trick :slightly_smiling_face:

7

Thank you! Replaced the code and worked perfectly, really appreciate the help :slightly_smiling_face: