Spaces between products pictures if product title have 2 lines

Store Design
, ,
1

Hey :slightly_smiling_face: If my product title is too long, there are spaces between the pictures at the next 2 products below

it’s happens only on the mobile, and just if product title have 2 lines

I added a picture for a reference

shopify problem.jpg
shopify problem.jpg356×653 10.7 KB

thanks :slightly_smiling_face:

1 Like
2

Hey @IL-AFEK ,

It sounds like the issue is happening due to the longer product title pushing the layout off balance, particularly on mobile where space is more limited. This is quite common when text overflows and affects the arrangement of the elements below.

To resolve this, I suggest applying a CSS tweak that ensures product titles stay within a certain limit, avoiding overflow and disrupting the layout.

Here’s a solution you can try:

@media only screen and (max-width: 767px) {
  .product-card__title {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

This CSS rule ensures that:

  1. White space wraps properly (white-space: normal), preventing the title from overflowing.

  2. Text is truncated with ellipsis (text-overflow: ellipsis) if it exceeds the available space.

By applying this tweak, product titles will be neatly contained, avoiding the spacing issue you’re experiencing with the product images on mobile.

Please feel free to contact me via email if you need further assistance—I’d be happy to help you!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
Thanks. :blush:

3

I want the 2 lines to appear without hiding the end of the sentence with dots, I just want the image below not to have spaces like in the image I attached above.

look at that site for example-

even one of the first 2 images have 2 lines at the product title, the products pictures below haven’t spaces

4

Hello,

Please share the website URL.

Thank you

5

I didn’t published the theme yet, this is a preview link-

the problem happening just at the mobile

6

I tried this too, doesn’t work :disappointed_face:

7

@IL-AFEK ,

I’m sorry to hear that the previous solution didn’t work! Let’s take a deeper look at the issue and refine the approach.

It seems like the issue is with how the layout is responding to the overflow when the product title has multiple lines. Instead of simply truncating the text, we may need to adjust the layout’s structure to accommodate varying title lengths.

Here’s an alternative solution:

  1. Ensure the product card has consistent height and space allocation for titles. We can add a maximum height to the title and ensure the other elements don’t shift.

  2. Flexbox solution for better layout control.

@media only screen and (max-width: 767px) {
  .product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .product-card__title {
    max-height: 3.6em; /* Adjust this based on the expected number of lines */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.8em; /* Adjust line-height if needed */
  }
}

If this still doesn’t work, I would be happy to look at the structure of your theme and explore further customizations.

8

still doesn’t work :disappointed_face:
can you please take a look on the theme preview?

thanks a lot, much appreciated!

9

Hi @IL-AFEK ,

Go to Online Store > Themes > Actions > Edit Code > t4s-base.css
Add below code in t4s-base.css file

@media only screen and (max-width: 460px) {
    .t4s-product-wrapper {
       min-height: 322px;
  }
}

oscprofessional_0-1735986718451.png
oscprofessional_0-1735986718451.png400×768 114 KB

10

Awesome!!! thanks a lot :slightly_smiling_face:

11

bigger phones like iPhone PRO MAX etc seems it’s still doesn’t work, still have these spaces