Fixed height for product titles in Archive/Catalog pages

  • Resolved geoffatmm

    (@geoffatmm)


    6 years, 11 months ago

    As the product title string length varies, the Price and Add to Cart buttons display at differing heights.

    Is there a way to fix the product string space on these pages so they are fixed at a specified number of lines?

    I would need 3 lines to ensure the price and buttons line up but other shops may need more or less.

    Can anyone offer some code to help?

    Geoff

    • This topic was modified 6 years, 11 months ago by geoffatmm.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • 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.

    Thread Starter geoffatmm

    (@geoffatmm)

    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.

    Thread Starter geoffatmm

    (@geoffatmm)

    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;
}
    Thread Starter geoffatmm

    (@geoffatmm)

    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.

    https://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 – https://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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Fixed height for product titles in Archive/Catalog pages’ is closed to new replies.