FROM CACHE - en_header

Products are not aligned due to long titles, reviews, and "Sold Out" Text

anth
Excursionist
24 0 2

Hello,

 

When I view my products on a collection page, after the first couple rows the products are no longer aligned due to different product title lengths, reviews, and even sold out text causing some images to shift further down as opposed to others. Thus my collection page get extremely misaligned and looks very sloppy.

I use an app to resize my images, so this seems to be strictly about the text.

Please let me know if there is any solutions, I use the Venue theme and have just published a new version of the theme, this issue did not exist on my old version of Venue.

 

Here is a link to my website: https://pbexpressliquor.com/

 

If you notice on the home page, the fourth item on the second row under 'Featured Products' is affected by this (it is slightly lower than other products on that row). If you select any of the categories on the top, for example wine or spirits, and look through the collections page, you will quickly start to notice that as you scroll down items become unaligned. 

 

This is a big issue for me and I desperately need a fix. I have posted this issue before but with little help/success.

I would really appreciate someone helping me to make all my products aligned and looking good.

Replies 5 (5)
Zworthkey
Shopify Partner
5581 642 1523

@anth 

Welcome to the Shopify community!
Thanks for your good question.

 

Please share your site URL,
I will check out the issue and provide you a solution here.

GavinChan
Shopify Partner
49 4 7

Hi @anth ,

 

My solution is to hide the overflowed section of long titles and meanwhile decrease the font size of the title.

Snipaste_2022-01-22_17-46-53.png

 

 

1. Go to Online Theme -> edit code -> Asset -> theme-critical.scss.css
2. add the following CSS code snippet to the end of the file

.product__title {
    text-transform: normal;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
}

 

Hope it works.

 

If helpful, please like and accept my solution.

Gavin Chan - Full Stack Web Developer & Shopify Partner
- If helpful then please Like and Accept the Solution
- Want to build a Shopify store, fix Shopify bugs, or speed optimization, Hire Me
- Feel free to contact me on hello@gavinchan.me
anth
Excursionist
24 0 2
AviZ
New Member
3 0 0

Hi @GavinChan thank you for this solution i need that as well however i cant find this location in my theme (Dawn) do you by any chance know where i need to put this code? Thanks a lot.

AviZ
New Member
3 0 0

Hi @anth did you find the solution? can you share it?