Adjusting Mouse Hover Box Dimensions Debut Theme?

[A_Jay]

Hi All,

I've been able to reverse engineer a lot of CSS/HTML to get the desired effect I'm looking for on my theme but I've hit a wall with trying to figure out if it is possible to adjust the size of the mouse hover box on my home page collections section with the Debut theme. (I.E when you hover over a product with your mouse you get the semi transparent outline). The problem I'm facing is I have added a quantity selector and  add to cart buttons and the when hovering over the product it highlights the entire grid, so when you click to add more quantities it redirects you to the product page. If I could I'd like to keep the redirect active but adjust the size of the box so that the people can update the quantities without being redirected. So far I've been unsuccessful at finding the CSS or HTML string to try and add a height parameter. Is this even possible without having to completely disable the link/redirect function? Any help would be greatly appreciated! 

Here's a shot of what I'm trying to accomplish. 

[ksh_verma]

@A_JayThere is anchor tag position issue, you need to maximize the bottom value of absolute anchor tag. I checked in debut theme demo store, you need change in css , please check attached image

However, if you increase  bottom value it will work when your title will appear in one or two line. So apply css accordingly and also responsive views.
Thanks

[A_Jay]

@ksh_verma Thanks for your reply. I've had some time this evening to have a look at this and am still having trouble getting this box to adjust. One thing I noticed is in my HTML and CSS the following class does not exist for me:

.full-width-link

Here is an example of what I I have in my product-card-grid.liquid and screenshot from my inspector of the info. from the anchor:

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% unless product.featured_image == blank %}
      {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
    {% endunless %}

    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
             class="grid-view-item__image lazyload"
             src="{{ product.featured_image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>

    <noscript>
      {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
      <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
    </noscript>

    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    
    <div class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}</div>
    
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
  
    </div>

I've tried doing the following to .grid-view-item__link in my theme.scss.liquid page

.grid-view-item__link {
 display: block;
bottom: 0;
}

and for the "bottom" numbers I've tried everything + numbers, - numbers +px, -px, and % and even tried using the "!important" to override anything else that may be interfering with no luck. Do you have any suggestions? I feel like I'm so close with this, and I appreciate the help immensely!

[ksh_verma]

@A_Jayplease share your shop url so that i can better help to solve the issue

Thanks

[A_Jay]

@ksh_verma No problem. Here is a link to the preview. 
https://7az7t7rbcfyz3fy3-26102568.shopifypreview.com

Appreciate the help.

[ksh_verma]

@A_Jay 

You need to move <form> tag outside of anchor tag <a></a>
Now:
<a>
        ....
        ....
        ....
<form></form>
</a>

Need to change:
<a>
        ....
        ....
        ....
</a>
<form></form>

please follow the screenshot:


Thanks
Kshitij

[A_Jay]

@ksh_verma That did it!! Thank you very much for the help with this! Was driving me nuts haha. 

Cheers!

[ksh_verma]

@A_JayThants cool :)
Best Wishes,