How do i fix the mobile landscape view settings?


When on mobile view, my site looks great viewing it vertically. However, when i turn my cell phone (iphone pro max), horizontally, then my three columns with listings content is distorted. Some of the text information and ratings inside the listings overflows outside the bottom of the columns.

Is there a fix for this so that it stays contained when viewing it on a mobile horizontally? If not is there a code to limit the columns to two when viewing horizontally on mobile? Thank you!


If I understand you correctly, please try this CSS snippet:

.hp-template--listings-view-page .hp-listings .hp-grid__item {flex-basis:50%; max-width:50%}

The problem is that I am using this css code:

It keeps the listings boxes all the same size. However, a problem with using this is that then in the mobile horizontal view it makes all the content squished in the bottom due to height.

Is there are a code I can use with @media or just for mobile that will override the above code I provided, and only for mobile view?

Thanks for your help!

Unfortunately there’s no simple solution for this, this would require calculating the highest listing in the row (probably via JS) and setting this height for all listings on the same row. Another alternative is using a masonry JS script.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.