Mobile shop images not inline

[HB]

Hi,

On our mobile site the images and listings on the shop page are not horizontally aligned. This is caused by the text overflow of the listings causing the next listing to start a bit lower.

We need to use this amount of text on some of our listings. Is their a fix to the grid layout that will allow correct alignment.

Website page: http://honestbrew.co.uk/shop/

Screen shot attached.

Cheers

[Kyle – SUPPORT]

You could try:

@media only screen and (min-width: 480px) { 
li .product-details {
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

– Kyle

[HB]

Hi,

Thanks for the CSS. Nearly there! It cuts off the end of the product description (see Cheery Stout in attached screen shot).

I changed the media query from (min-width: 480px) to (max-width: 480px)

Any further ideas? Check the site out again as the custom CSS is still added.

Cheers

[Kyle – SUPPORT]

Hi

That will not change anything. Change the height to 46px.

It will only show 2 lines of text, but it’s the only way around it.

– Kyle