I have alignment issue in quick view button, I am using prestige theme and the issue is the button is not aligned an is not in 1 line when there are multiple products in collections, as some products have more information as compared to other.
Here is my code
<product-card class="product-card" {% if reveal %}reveal-on-scroll="true"{% endif %} handle="{{ product.handle | escape }}">
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT MEDIA
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="product-card__wrapper">
{%- if product.media.size > 0 -%}
<div class="product-card__figure">
{%- if show_badges -%}
{%- render 'product-badges', product: product, vertical: true, context: 'card' -%}
{%- endif -%}
<a href="{{ product.url }}" class="product-card__media" draggable="false" data-instant>
{%- capture sizes -%}
{%- if stacked -%}
(max-width: 699px) calc(100vw / {{ section.settings.products_per_row_mobile }}), (max-width: 999px) calc(100vw / {{ 3 | at_most: section.settings.products_per_row_desktop | default: 3 }} - 64px), calc((100vw - 96px) / {{ section.settings.products_per_row_desktop | default: 3 }} - (24px / {{ section.settings.products_per_row_desktop | default: 3 }} * {{ section.settings.products_per_row_desktop | default: 3 | minus: 1 }}))
{%- else -%}
(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / {{ section.settings.products_per_row_desktop | default: 3 }} - (24px / {{ section.settings.products_per_row_desktop | default: 3 }} * {{ section.settings.products_per_row_desktop | default: 3 | minus: 1 }}))
{%- endif -%}
{%- endcapture -%}
{%- liquid
assign main_media_loading_strategy = nil
if section.index > 3 or position > 3
assign main_media_loading_strategy = 'lazy'
endif
-%}
{%- capture main_image_classes -%}product-card__image product-card__image--primary {% if settings.product_image_aspect_ratio contains 'crop' %}object-cover{% endif %} aspect-{{ settings.product_image_aspect_ratio | split: '_' | first }}{%- endcapture -%}
{{- product.featured_media | image_url: width: product.featured_media.width | image_tag: loading: main_media_loading_strategy, sizes: sizes, widths: '200,300,400,500,600,700,800,1000,1200,1400,1600,1800', draggable: 'false', class: main_image_classes -}}
{%- liquid
if show_secondary_image and product.media.size > 1
assign next_media = product.media[product.featured_media.position] | default: product.media[1]
if next_media != blank
echo next_media | image_url: width: next_media.width | image_tag: class: 'product-card__image product-card__image--secondary', loading: 'lazy', fetchpriority: 'low', sizes: sizes, widths: '200,300,400,500,600,700,800,1000,1200,1400,1600,1800', draggable: 'false'
endif
endif
-%}
</a>
</div>
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT INFO
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="product-card__info empty:hidden">
{%- assign text_class = '' -%}
{%- if settings.product_card_text_font == 'heading' -%}
{%- assign text_class = 'h6' -%}
{%- endif -%}
{%- if show_title or show_prices or show_vendor and product.vendor != blank -%}
<div class="v-stack justify-items-center gap-2">
{%- if show_vendor and product.vendor != blank -%}
{%- capture vendor_class -%}smallcaps {% if settings.product_card_text_font == 'heading' %}heading{% endif %}{% endcapture %}
{%- render 'vendor' with product.vendor, class: vendor_class -%}
{%- endif -%}
{%- if show_title or show_prices -%}
<div class="v-stack justify-items-center gap-1">
{%- if show_title -%}
<a href="{{ product.url }}" class="product-title {% if text_class != blank %}{{ text_class }}{% endif %} {% if settings.product_title_max_lines > 0 %}line-clamp{% endif %}" {% if settings.product_title_max_lines > 0 %}style="--line-clamp-count: {{ settings.product_title_max_lines }}"{% endif %} data-instant>
{{- product.title -}}
</a>
{%- endif -%}
{%- if show_prices -%}
{%- render 'price-list', product: product, context: 'card' -%}
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- if show_swatches and settings.product_color_display != 'hide' -%}
{%- liquid
assign matched_product_option = nil
assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ','
# First, we try to find an option named explicitly "color" in the store's language
for color_label in color_label_list
if product.options_by_name[color_label] != blank
assign matched_product_option = product.options_by_name[color_label]
break
endif
endfor
# If we didn't find an option named "color", we try to find an option that has swatches, as this is probably
# the color option that the merchant want to use for swatches
if matched_product_option == blank
for product_option in product.options_with_values
assign values_with_swatch = product_option.values | where: 'swatch'
if values_with_swatch.size > 0
assign matched_product_option = product_option
break
endif
endfor
endif
-%}
{%- if matched_product_option != blank -%}
{%- case settings.product_color_display -%}
{%- when 'count' -%}
<p class="smallcaps text-subdued">{{- 'product.general.available_colors_count' | t: count: matched_product_option.values.size -}}</p>
{%- when 'swatch' -%}
<fieldset class="h-stack wrap justify-center gap-1">
<legend class="sr-only">{{ matched_product_option.name }}</legend>
{%- capture param_name -%}swatch-{{ quick_buy_context }}-{{ section.id }}-{{ product.id }}-{{ matched_product_option.position }}{%- endcapture -%}
{%- liquid
for option_value in matched_product_option.values
render 'option-value', type: 'swatch', option_value: option_value, param_name: param_name, option_position: matched_product_option.position, output_variant_media: true, size: 'sm'
endfor
-%}
</fieldset>
{%- endcase -%}
{%- endif -%}
{%- endif -%}
{%- if show_rating -%}
{%- render 'product-rating', product: product, show_empty: settings.show_product_rating_if_empty, display_mode: settings.product_rating_mode -%}
{%- endif -%}
</div>
<!-- Quick buy button(s) -->
{% if show_quick_buy and product.available %}
<div class="product-card__actions">
{% if product.variants.size == 1 and product.selling_plan_groups.size == 0 %}
<product-form>
{% form 'product', product %}
<input type="hidden" name="on_success" value="force_open_drawer">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" class="product-card__quick-add-button">
<span class="sr-only">
{{ 'product.general.add_to_cart_button' | t }}
</span>
ADD TO CART
</button>
{% endform %}
</product-form>
{% else %}
{% capture quick_buy_id %}
product-quick-buy-{{ section.id }}-{{ block.id }}-{{ quick_buy_context }}-{{ product.id }}
{% endcapture %}
<button type="button" aria-controls="{{ quick_buy_id }}"
class="product-card__quick-add-button">
<span class="sr-only">
{{ 'product.general.choose_options' | t }}
</span>
CHOOSE OPTION
</button>
<quick-buy-modal handle="{{ product.handle }}?variant={{ product.selected_or_first_available_variant.id }}"
class="quick-buy-modal modal"
id="{{ quick_buy_id }}">
</quick-buy-modal>
{% endif %}
</div>
{% endif %}
</div>
</product-card>
Here is my css code:
.product-card {
display: flex;
flex-direction: column;
/* Remove align-items: center; to allow full-width stretching */
min-height: 400px; /* This is a baseline height, adjust if needed */
width: 100%;
}
.product-card__wrapper {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
.product-card__info {
flex: 1; /* This area grows to fill available vertical space */
}
.product-card__actions {
margin-top: auto;
display: flex;
justify-content: center;
width: 100%;
}
.product-card__quick-add-button {
border-radius: 5px;
width: 180px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0.625rem;
text-align: center;
background: rgb(var(--circle-button-background));
color: rgb(var(--circle-button-text-color));
cursor: pointer;
border: none;
}
@media screen and (pointer: fine) {
.product-card__quick-add-button {
opacity: 1;
transform: none;
transition: none;
border-radius: 5px;
width: 180px;
align-items: center;
height: 50px;
}
}
.product-card__info {
text-align: center;
align-content: start;
justify-items: center;
gap: .75rem;
display: grid;
}
Here is the preview link:
https://3d91eknx4q2qfael-2745001.shopifypreview.com/collections/all
Also on the home page the issue is when I am checking in the full screen it is showing correct alignement, but when seeing in the customizer is really disorted.
How can I fix it?