Can We Adjust the Height of the Store Locator/Map?

Yes, Agile Store Locator does provide users with the option to adjust the height of the store locator and map. Furthermore, to adjust the height of the Store Locator, please add the below CSS line in the “theme style.css” located in “Appearance” “Customize” “Additional CSS”

body #asl-storelocator.asl-p-cont #asl-map-canv,
body #asl-storelocator.asl-cont #asl-map-canv {height: 550px !important}

Moreover, the numerical value “550” represents the height of the Store Locator/ Map. Simply raise or lower this number to adjust the height accordingly

For example, the line with 280 as the numerical value (shown below), will significantly reduce the height of the store locator. Similarly, a higher number will increase the height.

 body #asl-storelocator.asl-p-cont #asl-map-canv,
 body #asl-storelocator.asl-cont #asl-map-canv {height: 280px !important}

Adjust the Height of Map in the Mobile Devices #

To adjust the height of the store locator map in the mobile devices only, the CSS rule below can be used, adjust the value 550px to your own value.

/* For screens with a maximum width of 767px (typical for mobile devices) */
@media (max-width: 767px) {
  body #asl-storelocator.asl-p-cont #asl-map-canv,
  body #asl-storelocator.asl-cont #asl-map-canv {
    height: 550px !important;
  }
}

Adjust the Height of List in the Mobile Devices #

To adjust the height of the store locator list in the mobile devices, the following CSS rule can be used to adjust it, change the value 550px to your own value.

/* For screens with a maximum width of 767px (typical for mobile devices) */
@media (max-width: 767px) {
    body #asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner {
        position: relative;
        height: 550px;
    }
}