Two-Column Layout for Listings in Mobile View

General HivePress
1

Hello HivePress Community,

I hope you’re doing well! I wanted to bring attention to the fact that a significant portion of users today primarily access websites through mobile devices. Given this trend, it would be beneficial to implement a two-column layout for listings in mobile view. Currently, the single-column layout appears too large on mobile devices, making it less user-friendly.

A two-column layout would enhance the browsing experience, allowing users to see more listings at a glance and improving overall accessibility. Any guidance or solutions on how to achieve this would be greatly appreciated!

5

Hi,

Yes, this can be done, but please note that it will require CSS tweaks, and it also depends on the number of attributes. We can provide a starter CSS snippet, but please note that this will require further advanced customization.

6

Hello @andrii ,
I am currently experiencing the same issue. I have tried with a custom CSS and the listings look a bit better (smaller boxes) on mobile, but I cannot make it display 2 columns instead of one. Can you please share the CSS snippet for this?

Thanks a lot!

9

Hi,

Please use this CSS snippet:

@media only screen and (max-width: 48em) {
    .home .hp-listings .hp-grid__item {flex-basis:50%; max-width:50%}
}

Please note that it can require further customization.

​I hope this is helpful to you.

1 Like
10

Hi andrii,

Thank you for the help! Unfortunately, this doesn’t look like it fixed it, at least not in the mobile view of Wordpress.

14

Hi,

We checked this snippet from our side, and it seems okay. Please make sure you add the CSS snippet using this documentation: How to add custom code snippets - HivePress Help Center
You should see changes like in this screenshot: Awesome Screenshot

15

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

16

Hello. Does anyone know if there is an option to display ads in two columns next to each other in the page view on a mobile device (phone) and not in one column as it is intended? Can this be edited somewhere?

19

Hi,

Please check this solution.

​I hope this is helpful to you