Responsive Classic Template

[andy_77]

Using the responsive classic template, and have product listing > columns per row set to 3.

Works well on desktop and mobile in portrait view, showing 3 rows of products on desktop, and 1 row of products on mobile.

As soon as you turn the mobile phone to landscape view, 2 rows of products show in grid view, with the images out of place, and overlapping the text.

Would anyone else who's experienced this, found a fix for this.

Just need to work out some css to set the product grid display to 1 in landscape view on mobile, whilst keeping everything else the same (3 rows on desktop, and1 row on mobile devices).

[simon1066]

In /includes/templates/YOUR_TEMPLATE/css/responsive_default.css look for and change:

@media (min-width: 481px) and (max-width: 767px) {
  .list-image {
    margin: 20px 20px 10px auto;
    margin-right: 20px;
    text-align: center;
    display: inline-block;
    height: 100%;
    vertical-align: top;
  }
}

to

@media (min-width: 481px) and (max-width: 767px) {
  .list-image {
    margin: 20px 20px 10px auto;
    margin-right: 20px;
    text-align: center;
    display: inline;
    height: 100%;
    vertical-align: top;
  }
}