Join

Customize MyListing Explore Pages to Only Show the Map

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Instructions

  1. Create a new CSS code snippet.
  2. Copy the contents of code snippet below.
  3. Paste the contents into your code snippet.
  4. Review any notes that I’ve provided.
  5. Save and enable the code snippet.
  6. Test.

Snippet

Notes

  • Configure the Explore Listings widget on your Explore pages to Display Listing Types As setting to Dropdown.
  • If you’re not seeing the code snippet take effect, ensure that your code snippet settings are set to override the theme.
  • Ensure you only apply the code snippet to the Explore page(s) where you only want to show the map.
CSS
/** HIDE THE FILTERS AND THE LISTINGS **/
.finder-listings, .finder-search {
    display: none !important;
}
/** EXPAND THE MAP FULL WIDTH **/
.finder-map {
    width: 100% !important;
}
/** HIDE THE ABILITY TO TOGGLE BETWEEN MAP VIEW AND LIST VIEW ON MOBILE **/
.explore-mobile-nav .nav-tabs li a {
    display: none !important;
}
/** HIDE THE SEARCH AND FILTER BAR ON MOBILE **/
.mobile-explore-head-top {
    display: none !important;
}
/** DISPLAY THE MAP FULL HEIGHT **/
/* CONTAINER */
@media only screen and (max-width: 1200px) {
.finder-container {
    height: 100vh !important;
    }
}
/* MAP */
@media only screen and (max-width: 1200px) {
.mobile-tab-map .mobile-explore-head-top~.finder-map {
    top: 0px !important;
    height: 100vh !important;
    }
}