Announcement

Collapse
No announcement yet.

Aligning content when images are not the same height

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Aligning content when images are not the same height

    When the category thumbnails are not all equal height the Product Name, Product Price and Add to Cart button can wind up at different places in the row (I'm sure many of you have seen this happen). Each of the
    Code:
    <div class="o-layout__item u-text-center x-product-list__item">
    maintain equal height within the section (thank you flex) but the content within the div is dependent upon the image height. It would be great if the content could be aligned to the bottom. I'm trying to find a "simple" solution that moves everything except the image to the bottom of the div.

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    You could probably use a combination of flex features to make this happen or you could try adjusting the height of the picture element by breakpoints, although that could get messy.
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      You could probably use a combination of flex features to make this happen or you could try adjusting the height of the picture element by breakpoints, although that could get messy.
      Thanks Matt - I'll keep trying. Maybe a wish list for future frameworks - maybe "assume" that not all thumbnails are the same size but that it would be "elegant" to have a layout that takes that into consideration.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        IMO, adding (if not already present) an independent container for the images and setting a min-height value would do the trick. (Unless Colossus is resizing images for various screen sizes, you'd only need the one statement.)
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


          #5
          Originally posted by Bruce - PhosphorMedia View Post
          IMO, adding (if not already present) an independent container for the images and setting a min-height value would do the trick. (Unless Colossus is resizing images for various screen sizes, you'd only need the one statement.)
          That would be the ideal way to do it but that's not quite how Colossus has it laid out...
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment

          Working...
          X