Select Page

Product alignment with different length titles

Home Forums Support Product alignment with different length titles

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Helpful
    Up
    0
    Down
    Not Helpful

    Hi folks
    This is probably more a Divi issue than Divi BodyCommerce.

    Using the Divi Bodycommerce system to have a uniquely styled view for displaying the shop page or category pages pulling in the products which I have built a template for and setup the product to have a drop shadow. The drop shadow is placed around each individual product and if some of the product titles are quite long they wrap around onto the next line making those product ‘boxes’ larger than others. This results in an untidy alignment issue:

    alignment

    I cant use the Divi Equalise Column Heights option since the drop shadow is on each individual product being pulled in and not controlled by the row settings.

    Anyone have any tips for making these the same height but of course allowing for short or long titles?

    Cheers!

    Helpful
    Up
    0
    Down
    Not Helpful

    So the best way to do this would be to use flex – however when you use flex it will mess up the column structure and you will have to manually use flex to change the number of products per line. This might help: https://css-tricks.com/fluid-width-equal-height-columns/

    I think the easiest way would be to add a min-height to each product – it is not the best as you will need to alter this height on mobile etc but think it will be best for you.

    Something like this:

    
    .woocommerce .et_pb_db_shop_loop ul.products li.product {
    min-height: 450px;
    }
    

    Change the pixels. Depending on your setup you might have to change this to the row or section as this will change the height with in the box shadow element.

    Maybe this

    
    .woocommerce .et_pb_db_shop_loop ul.products li.product .et_pb_row {
    min-height: 450px;
    }
    

    Hopefully this helps

    Helpful
    Up
    0
    Down
    Not Helpful

    Hi

    Thanks for the quick response! I have already played around with Flex solutions that have been posted out there as workarounds for Divi – but they mostly relied on having rows with columns where you could apply CSS ids – I tried all sorts of combinations without success.

    I will look at your solution which is different approach and let you know.

    Thanks again!

    Helpful
    Up
    1
    Down
    Not Helpful

    OK tried that and great start the height of each product is now the same:

    Divi Engine initial fix

    As you can see the image in the product with a shorter name is slightly raised, so I set a minimum height for the Title module aand that seems to be my fix 🙂

    DE fix pllus extra CSS to set title min height

    Thanks for the help on this!

    Helpful
    Up
    0
    Down
    Not Helpful

    Perfect.

    Just make sure you check all the responsive states and change the height accordingly as on mobile it might be too high 😀

    Glad it worked!

    Helpful
    Up
    1
    Down
    Not Helpful

    Yes I will do – Now to experiment with Divi Mega Menu on this site as well – just purchased! 🙂

    Thanks again.

    Helpful
    Up
    0
    Down
    Not Helpful

    Hi Cliff any chance you could share the exact code you used for this and where it goes? Im also trying to make the 2 column width on mobiles bigger as at the moment its too narrow, any ideas where I do this?

    Helpful
    Up
    0
    Down
    Not Helpful

    Hi Paul

    As well as the fix suggested above I also added some code within the Product Loop library item – I did the following

    .PL Title – Product Page / Loop Layout Module Settings module within the Advanced tab I set Main Element as min-height: 60px;

    This works ok for me on tablets and mobiles as well so did not bother adding responsive coding.

    Hope that helps

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

You must be logged in to reply to this topic.