How to Hide or Move Map on Listings Archive Page in mobile

[ermiaskebede]

Hello,

I’m using HivePress with the ListingHive theme and I need help with the map display on my listings archive page ON MOBILE PHONE (https://website.com/listings/).

Currently, the map appears on the listings page at top, but I would like to either:

1. Hide the map completely from the listings archive page on mobile only, OR

2. Move it to the bottom of the page instead of having it in the sidebar/top area

I’ve tried adding custom CSS but I’m not sure which specific class or selector targets the map on the listings archive page (not individual listing pages).

What I’ve tried:

• Adding CSS to hide .hp-listings__map but it doesn’t seem to work

• Looking through HivePress settings but couldn’t find an option to disable the map on archive pages

What I need:

• The correct CSS selector to hide the map on the listings archive page

• OR a PHP code snippet to move/remove the map using HivePress filters

• Ideally a solution that won’t be lost when the theme updates

  Thank you in advance.

[ChrisB]

Hi @ermiaskebede,

You can use the following CSS to hide the map on the search page for mobiles.

/* Hide map on mobile devices */
@media (max-width: 768px) {
  .hp-template--listings-view-page .hp-map {
    display: none;
  }
}

I hope this helps!

Cheers,
Chris

[kseniia]

Hi,

The recommended approach is to use the CSS that was provided earlier. If you want to actually move/reorder elements, that’s more complex and would require JavaScript customization, so if the first option works for you, it’s definitely better to use that.

Also, thanks for the feedback. We’ll work on improving the mobile UX. We’ll consider collapsing the map on mobile with the option to expand it (as it does in the RentalHive theme, for instance).