Hello,
Could somebody please help me find out how to fix this problem. On my collection page my product titles are appearing at different heights as shown in the picture attached. All of the titles for the products that are either on sale or sold out appear slightly lower than the titles for the general products. As shown the title for the T-shirt sits where it is supposed to, with all of the other titles for the products either on sale or sold out sitting slightly lower. This is the case on both desktop and mobile.
I have made a lot of custom CSS changes myself so this could be something I’ve done, but I’m very much an amateur, and can’t figure out how to fix this.
Any help would be much appreciated.
Thank you.
Hello @Stephanosp , Can you please share your store url
Hi, yes of course it’s;
www.stefanoselea.com
Certainly! Here’s a response with a professional tone and guidance:
Hi there! This issue is common, especially when using custom CSS for layouts. It sounds like the additional “On Sale” or “Sold Out” labels are altering the layout by pushing titles down slightly, creating the uneven height issue.
To fix this, you can add a consistent height to the container that holds your product titles. Here’s a quick CSS fix you can try:
.product-title-container {
min-height: 60px; /* Adjust based on your layout */
display: flex;
align-items: center; /* Centers the text within the container */
}
This ensures each title occupies the same space, regardless of labels. If the issue persists, inspect the HTML structure to ensure labels aren’t affecting title positioning differently.
Feel free to reach out if you need further assistance or guidance in fine-tuning your CSS!
Hello @Stephanosp , this is causing issue screenshot attached below
Here is the solution go to timber.scss.css file on line number - 8092 add below given style this will solv your issue.
.collection-main-body .collection-main-body-inner .grid-view-item-image {
margin-bottom: 0;
}
1 Like
Thank you very much! That worked perfectly.
1 Like
