Adjusting Mouse Hover Box Dimensions Debut Theme?

Highlighted
New Member
4 0 0

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. 
Untitled.png

 

 

0 Likes

@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
home cedcoss Desktop image.html.png
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

Kshitij | Shopify Expert @ Cedcommerce  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog
0 Likes
New Member
4 0 0

@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>

Untitled1.png

 

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!

0 Likes

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

Thanks

Kshitij | Shopify Expert @ Cedcommerce  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog
0 Likes
New Member
4 0 0

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

 

Appreciate the help.

0 Likes

@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:
home cedcoss Desktop image.html(1).png

Thanks
Kshitij

Kshitij | Shopify Expert @ Cedcommerce  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog
1 Like
New Member
4 0 0

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

 

Cheers!

 

0 Likes

@A_JayThants cool :)
Best Wishes,

Kshitij | Shopify Expert @ Cedcommerce  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog
0 Likes