Show Map and List Stacked on Mobile

CSS Codes Store Locator
1

Hi,

I didn’t see an option for stacked view on mobile. This is my suggesting with custom CSS.

Add this code to the Custom CSS field on the Style tab of your widget’s settings:

/* --- Mobile Layout: Show Map AND List (Stacked & Scrollable) --- */
@media (max-width: 768px) {

  /* Allow the entire widget to grow to fit all content. */
  [class*="widget__Container-sc"] {
    height: auto !important;
  }

  /* Set the main mobile container to a flex column layout. */
  [class*="mobile-layout__Container-sc"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* Style the map container. */
  [class*="mobile-layout__MapContainer-sc"] {
    display: block !important;
    order: 1;
    height: 300px !important;
    flex-shrink: 0; /* Prevent map from shrinking */
  }

  /* Style the directory/list container to enable scrolling. */
  [class*="mobile-layout__Directory-sc"] {
    display: block !important;
    order: 2;
    height: auto !important;
    /* This ensures that if the list is very long, it will scroll internally. */
    overflow-y: auto !important;
    /* This tells the list to take up the remaining available space. */
    flex-grow: 1;
    margin-top: 20px;
  }

  /* Hide the floating swap button. */
  [class*="FloatingButton__FloatingButtonContainer-sc"] {
    display: none !important;
  }

}
2 Likes
2

Hey there, @user2694 :waving_hand:

Works like a charm - a huge thank you for sharing your solution with us! :blush: