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

**URL:** <https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397>\
**Category:** Geolocation\
**Tags:** code\
**Created:** [January 26, 2026, 4:46pm UTC](https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397 "2026-01-26T16:46:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ermiaskebede](https://community.hivepress.io/user_avatar/community.hivepress.io/ermiaskebede/32/14220_2.png) [@ermiaskebede](https://community.hivepress.io/u/ermiaskebede)\
**Post date:** [January 26, 2026, 4:46pm UTC](https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397/1 "2026-01-26T16:46:46Z")

</div>

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/](https://staffingfinder.ca/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

---

<div class="post-metadata">

**Author:** ![ChrisB](https://community.hivepress.io/user_avatar/community.hivepress.io/chrisb/32/14185_2.png) [@ChrisB](https://community.hivepress.io/u/ChrisB)\
**Post date:** [January 26, 2026, 6:04pm UTC](https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397/2 "2026-01-26T18:04:22Z")

</div>

Hi @ermiaskebede,

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

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

```

I hope this helps!

Cheers,  
Chris ✌

---

<div class="post-metadata">

**Author:** ![kseniia](https://community.hivepress.io/user_avatar/community.hivepress.io/kseniia/32/13513_2.png) [@kseniia](https://community.hivepress.io/u/kseniia)\
**Post date:** [January 27, 2026, 3:41pm UTC](https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397/5 "2026-01-27T15:41:10Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![system](https://community.hivepress.io/user_avatar/community.hivepress.io/system/32/13990_2.png) [@system](https://community.hivepress.io/u/system)\
**Post date:** [February 26, 2026, 3:42pm UTC](https://community.hivepress.io/t/how-to-hide-or-move-map-on-listings-archive-page-in-mobile/17397/6 "2026-02-26T15:42:07Z")

</div>

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