Ventrue theme space around the products on collection page

Store Design
1

The question is related to the venture theme.

When I go to the product page on mobile view, there is a space between the image and the name, is there a way to get rid of this (see image attached)? This space is not shown in desktop view. I have enabled “Show frame around images” on the theme. but even when I disable it the space is still there in mobile view.

Also is it possible to limit the product title to a single line and use the ellipsis (..)?

patik986_1-1661312288915.png
patik986_1-1661312288915.png776×418 114 KB

2

Hi Patik,
Welcome to the Shopify community
Sorry for the problem you are facing, it would be my pleasure to help you.
Please share your site URL,
I will check out the issue and give you some solutions here.

3

https://blunders.com/

this is my site, thanks for looking into it.

4

Hi! @patik986

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for

your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.css

.product-card__image-container {

height: 323px !important;

margin-bottom: 0px !important;

}

Best regards,

PageFly

5

Thanks for the solution but it added huge padding at the top and small padding at the bottom. see below. also messed up desktop layout by wired cutting the image in half.

patik986_0-1661326655876.png
patik986_0-1661326655876.png1058×1046 153 KB

6

I was able to fix it with this code

/================ Product Grid ================/
{% if settings.product_vendor_enable %}
$product-card-height: 255px;
{% else %}
$product-card-height: 235px;
{% endif %}
{% if settings.product_images_padding %}
$product-image-padding: 10px;
$product-image-margin-bottom: 55px;
// original
// $product-image-padding: 25px;
// $product-image-margin-bottom: 60px;
{% else %}
$product-image-padding: 0;
$product-image-margin-bottom: 80px;
{% endif %}

to limit the porduct name to one line use

.product-card__name {
font-weight: $font-weight-body-bold;
color: $color-heading;
// white-space: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}