Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #16583

    I have product images that come in many different heights and I don’t want to hard crop them. This makes the product category page quite messy since the text get pushed down depending on the image height. I would like to resolve this be aligning the product category images by bottom not by top, as it is per default. I think this can be achieved by some css but I’m stuck. Help please?


    Hi dat98cbr,

    We’ll need to take a look at your product page now and see if some css can fix it. If you can provide the link here we’ll take a look :)




    We are using the theme out off the box. So any css that applies to v1.6 will work for me!


    Hi dat98cbr,

    Like Devin said, in order for us to help we’ll need to take a look at your site. It’s possible something like vertical-align:bottom; may work or padding-top/padding-bottom. We just can’t be certain without looking at the website first hand.

    If that’s not possible then you may want to download Firebug for Firefox and try to troubleshoot yourself using it.





    Please provide a link to the issue you describe in order for us to help you resolve the problem. We understand that you are using the theme out of the box, but the hypothetical situation you describe require for us to find images , create pages and set up this scenario while hoping that we understood your requirements correctly.

    Besides, Propulsion is a robust theme with multiple ways to get the same result, so there is no guarantee that we both would be following the same process to achieve the same goal.

    [Edit: Didn’t see Mya answer above, was 4 minutes slower than her.]





    Add following code to css/custom.css:

    .template-shop .thumbnail_container_inner {
    height: 245px;




    You are the dude!

    Use the Dudes css-code and then the following to make to images vertical align bottom:

    .attachment-shop_catalog {





    I realize that this gives a lot of white space between the rows if you have one row with for instance with the maximum image height of 100px while the container is 245px or more.

    Is there a way to let the container shrink to the same height as the maximum height of the tallest image? Ie the tallest image is 100px therefore the container becomes 100px tall as well?

    I tried max-height: 245px and min-height: 100px but couldn’t get it sorted.


    Hi dat98cbr,

    No, not that I can think of. The way the products get output they need to have a defined height to get everything set and aligned.



Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Align product category images bottom’ is closed to new replies.