Hi!
I have adjusted the product item to have more padding around the item (when not hovered) however now the theme’s inbuilt hover animation is showing wrong as shown in screenshot below.
Any tips on how to fix this?
Hi @kirsten11123 , Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hi @kirsten11123,
Please share the URL of your website.
This is Noah from PageFly - Shopify Page Builder App
I can help you. Please can you provide the website url. Thank you.
Best regards,
Noah | PageFly
Sorry here you go - https://y3jzs41rkhdfijkr-17718763.shopifypreview.com
Hi @kirsten11123 Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
@kirsten11123 , Please check the screen shot.
By increasing or decreasing the font size, the hover effect willa adjust accordingly.
Check this index file and do the changes.
Thanks
Hello @kirsten11123
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below CSS at the bottom of the file → Save
.product-item__product-title.fs-product-card-title {
white-space: normal;
height: 21px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
line-height: 1.1;
}
The home page looks fine.
The collection page Looks fine.
Best Regards,
Dws_pvt_ltd
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.featured-collection-grid__inner .product-item{
height: 100% !important;
}
.featured-collection-grid__inner .product-item__inner{
height: 100% !important;
}
Thanks Noah, this worked great!
Hi @kirsten11123 Thank you, Have a nice day 
!