Quick add to button alignment in the home and collection page

[sahilsharma9515]

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?

[amilla]

Hi, the "Choose Option" button isn't clickable

[mageplaza-cs]

Hi @sahilsharma9515 

It seems the current website has expired. Could you provide me with the new website URL?

[sahilsharma9515]

Thanks for offering the help, but I am able to fix this issue, I am facing other issue related to css, it will be great if you can offer help there.