Store Locator Responsive mobile Issue

  • Issue description:
    Hi there, looking for help around please, I create a store locator widget for a client, the client had 7 locations, I setup 10 per page so it can be showing all locations in one page, it works well on desktop, but on mobile doesn’t show the 7 locations in one page, instead it create a second instance scroll for the widget, so I have the scroll for the page and second scroll for the widget. How can I modify the widget to display all locations on the page without requiring a scroll on mobile devices?
    I tried changing the size of the Height of the embed, but it doesn’t work for me,

Any help or guidance will be appreciated, Thank you!

  • Link to the page with the widget in question:
1 Like

Hi there, @Abel :waving_hand:

I see that you’ve already reached out to my colleague Anna from the Support Team, and she’s provided you with this CSS code:

@media (max-width: 480px) {
  [class*='location-preview-image-layout__Content-sc'] {
    gap: 4px;
  }
  [class*='location-preview-image-layout__Content-sc']
    [class*='location-preview__Title-sc'] {
    font-size: 14px;
  }
  [class*='location-preview-image-layout__Content-sc']
    [class*='location-preview__Metainfo-sc']
    *,
  [class*='location-preview-image-layout__Content-sc']
    [class*='location-preview__Block-sc']
    * {
    font-size: 12px;
  }
  [class*='location-preview-image-layout__StyledMediaImage-sc'] {
    width: 74px;
    padding-top: 74px;
  }
}

Please test it out and let us know how it worked :slightly_smiling_face:

1 Like

Thank you for adding the CSS, but what I need is for the list to display the complete list of 7 locations when it’s shown on mobile, so the scroll effect can’t be enabled.

Please can you help me achieve that?
I appreciate your help in advance!

Thank you!

1 Like

Apologies for the delayed response!

I see that my colleague Anna is working on your request, and she’ll gladly assist you further :slightly_smiling_face:

Thanks for the reply. Yes, I hope she can help me with this.

1 Like