No announcement yet.

Specific height for CTGY/SRCH name

  • Filter
  • Time
  • Show
Clear All
new posts

  • Specific height for CTGY/SRCH name

    I have a bunch of products with different length names. This cause multiple lines for some products. This in turn makes price and anything below the name not inline with each other. How can I set the name height to something specific? I am still old school css and need to learn em, rem, etc.

  • You can utilize the class x-product-list__name and set a minimum height based on the number of lines you would expect the longest name to use and multiply that by the line-height you have set. Based on the default code in Shadows, I would try something like this where the maximum number of lines I am expecting is 2:
    .x-product-list__name {
        min-height: calc(2em * 1.8);
    This solutions isn't bulletproof and will probably require a little finessing.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.


    • Perfect! Thanks Matt! I just need to clean up my product images to make they the same height and then I'm good to go.


      • Looks like I was able to get the image height to line up using this:

        HTML Code:
        .x-product-list__image { 
        min-height: calc(10em * 1.8);
        Thanks again Matt. Huge help.



        This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

        This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.