Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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?

    #92086

    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 :)

    Regards,

    Devin

    #92087

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

    #92088

    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.

    Regards,

    Mya

    #92089

    Hi,

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

    Thanks,

    Nick

    #92090
    #92091

    Hey!

    Add following code to css/custom.css:

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

    Regards,

    Peter

    #92092

    You are the dude!

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

    .attachment-shop_catalog {

    position:absolute;

    bottom:1px;

    }

    #92093

    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.

    #92094

    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.

    Regards,

    Devin

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

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