Texts under li’s get mess up when text is lengthy

2 Views

I am using WooCommerce Plugin for WordPress to make an ecommerce store. But my problem is that some of items have title more than 50-60 characters . By this the layout for the product goes mess up. Here I am attaching the screen shot for the layout. Kindly suggest me what should I do here? Live site you can get here.

enter image description here

Read More

Update

Broken screen image is hereenter image description here

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Well, you have about 3 options.

    1. do nothing and live with it
    2. constraint the li or the h3 height and have it scroll/hide the overflow.
    3. cut down the titles

    Number 2 would be to add this to the css : 

    div#content ul.products li.product {height:300px; overflow:auto;}

    or it could also be to add this instead : 

    div#content ul.products li.product h3 {height:1em;overflow:hidden}

    Number 3 is about simply not having long title…
    when you write the game title, look if the string length is greater than your limit, if so, only print a substr and append “…”.

    There’s one other solution I can think of, but it’s a bit more complicated. Take the game title length and scale down your text size accordingly, up to a certain threshold.