Announcement

Collapse
No announcement yet.

Specific height for CTGY/SRCH name

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

    #2
    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:
    Code:
    .x-product-list__name {
        min-height: calc(2em * 1.8);
    }
    This solutions isn't bulletproof and will probably require a little finessing.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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.

      Comment


        #4
        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.

        Comment

        Working...
        X