Hi @geoffatmm. This is a common problem as the title strings will vary on certain products.
One quick fix is to identify the max title length and assign the title div height based on that. In your case I can see that your titles are max expanding to 3 lines. You can add following to your CSS and the title container for all the titles will be specific in height to contain 3-lines without disturbing the layout.
.post-type-archive .title {
min-height: 88px !important;
}
Another way is to write few lines of JS/jQuery to restrict titles on certain character count. Also, I’m sure you can also look into plugin or code solutions for the same.
Brilliant. Thank you. The CSS code worked immediately.
In php code, I can enter comments that are ignored. Is there a way to do this in css? I now have several patches and want to record what each one is in the code itself if possible?
Thanks again.
Geoff
Yes, you can refer to the following link for the same.
https://css-tricks.com/snippets/css/comments-in-css/
Also, please mark the topic as resolved.
Hi Again Vajrasar,
Although the code is working in my shop and catalog/archive pages, it is not working with the related products or recommended products on the single product pages. Is there a separate code you can give me for those?
Geoff
@geoffatmm You can change the CSS code to the following
.product .title {
min-height: 88px;
}
Thanks once again for all your help. It is greatly appreciated.
Geoff
cd
(@chuffeddeal)
Please help me with the same problem. I have tried your css but not working.
http://www.chuffeddeal.com
@chuffeddeal
Please explain the issue you are facing and also what you want to achieve.
Also, please share the URL where we can see the issue.
Thanks.
cd
(@chuffeddeal)
Hi Vajrasar,
I am facing improper alignments of buttons on the website. What exactly I want is all the buttons should appear parallel to each other like select/add to cart everywhere on website ( homepage, recently viewed, related products etc).
Here is the url of my site – http://www.chuffeddeal.com/
Please help me with the solution. Also, the recently viewed and related products aren’t appearing in a single, when the products are more than 4 they are going downside. Could you help me to put left(<) and right (>) scroll option for that.
Thanks