1.5.7c Product Listing Page Alignment Issue In Mobile Landscape View

**chrx** · 16 Jul 2021, 08:35 PM

Hello,

I am currently building my first 1.5.7c site, using the responsive_classic template. PHP Version 7.3.27.

I have two other 1.5.5e sites, using the westminster_new template.

The issue I am observing with responsive_classic in 1.5.7c, involves the Product Listing page on a mobile phone, in this case a current Apple iPhone SE. When viewed in portrait orientation, the spacing of the itemTitle, list-price and qmin is appropriate for the layout.

But when the phone is rotated to landscape orientation, the itemTitle, list-price and qmin are pushed down into the next row of list-images and are obscured by those images.
Here is an example:
http://75.103.81.66/index.php?main_page=index&cPath=1_9

This issue does not exist with the other 1.5.5e sites using the westminster_new template.

Any advice/guidance is greatly appreciated.

I have searched the responsive_mobile.css file and am not able to find where I can correct this issue. I also have not been able to find any pre-existing posts related to this issue.

Thank you,
chrx

**chrx** · 24 Jul 2021, 12:16 AM

Hi all, just an update on this.

New domain for this is: https://lifterbushings.com/

Page for consideration is: https://lifterbushings.com/index.php...ndex&cPath=3_5

Again, thank you to anyone, who can provide input.
chrx

**dbltoe** · 24 Jul 2021, 01:52 AM

Looks great in chrome, safari, and firefox on iPhone

**simon1066** · 24 Jul 2021, 08:42 AM

Yes, I see this on my device (Android Chrome). In responsive_mobile.css change:

line#132

Code:

.list-image{
margin:20px 20px 10px auto; 
text-align:center;
display:inline-block;
height:100%;
vertical-align:top;
}

to

Code:

.list-image{
margin:20px 20px 10px auto; 
text-align:center;
display:inline-block;
height:auto;
vertical-align:top;
}

The issue also occurs on a desktop at certain screen sizes, so make the same alteration in responsive_default.css line#323

**chrx** · 28 Jul 2021, 05:29 PM

Thank you both, for having a look and responding. And a another big thank you simon1066, for your pointer on the css! That did the trick!
Cheers,
chrx