View Map Button Issue - Mobile View

Ask the Community General Questions
1

Greeting All,

  • Issue description:
    Is there a way to remove the view on map, button? Or change its location? Or adjust its dimensions?

  • Link to the page with the widget in question:
    This is what it looks like on mobile, which obstructs the details of the locations. The widget is set to show 3 locations, and does so well in desktop view and tablet view.

image
image469Ă—348 13 KB

cc: @Max

Best wishes,
mw

1 Like
3

Hi @Master_Web :wave:

Could you please send me a link to the page where your widget is installed?

1 Like
4

Thanks @Max.

DM’d you the link. Also, I don’t think this code Store Locator Default Map View on Mobile - #6 by Max would work for my use case.

The best view would be for the list of locations. Then users can scroll and select a location to see its point on the map. That’s a better user experience on a large mobile screen of 6.7 inches.

It’s just that the “View Map” button is so large on the mobile screen of 6.7 inches, that it blocks view of everything. I’ve been able to reduce the font, eliminate some of the details, then “stretch” the widget to a size that is “kinda” comfortable to view.

Hope these details help.

Best wishes,
mw

1 Like
5

This code will help you hide the View on Map button:

[class*="mobile-layout__MapContainer-sc"] +
[class*="FloatingButtonContainer-sc"] {
  display: none !important;
}

Test it out and let me know if you like the result :slightly_smiling_face:

Also, I’ve noticed that only 1 location is displayed right away on mobile and you should scroll down to see another location. Would you like to keep things as they are or maybe you’d like to display the full list of locations right away?

1 Like
6

Thank you @Max.

It works well, though the map disappears totally. Would it do the same on a tablet? - This wouldn’t be ideal.

Also, I don’t really have a problem with the need for users to scroll. However, I’m open to seeing how another format would work and look.

Thanks again,
mw

1 Like
7

@Master_Web In this case, could you please clarify what you’d like to achieve?

Do you want to display on mobile both map and location list like in the desktop view? Or would you like to reduce the size of the button or even maybe change its position? If you’d like to change its position, please specify the place where you’d like it to be moved.

1 Like
8

Thanks Max.

So I edited the text to just be “Map”. I think that would fit very neatly right below “Search” in the circled area below:

image
image469Ă—348 14.2 KB

Hope this helps.

Thank you again,
mw

1 Like
9

Here is the code for changing the position and size of the button:

/* Change position */

[class*='FloatingButton__FloatingButtonContainer-sc'] {
  right: 70px;
  bottom: -40px!important;
}

/* Change size of the button*/

[class*='FloatingButton__FloatingButtonContainer-sc'] [class*='ButtonBase__Overlay-sc'] {
  padding: 5px!important;
}

[class*='FloatingButton__FloatingButtonContainer-sc'] [class*='Icon__IconContainer-sc'] {
  margin-right: 2px!important;
}

Try it out and let me know if it worked for you :slightly_smiling_face:

1 Like
10

Thanks Max.

Works perfectly.

mw

1 Like
11

You’re most welcome :slightly_smiling_face:

1 Like
12

I am needing the map view as the default, but then have the list view button somewhere at the top easily seen before scrolling so they can choose at any given time.

1 Like
13

Welcome @user30741 to the Community :sparkles:

What might be useful is if you share a mock-up how you want it to look.

Also, did you reach out to the support team from within the widget?

They can also help, especially when Max or Helga are vacationing.

Also, when you have some time, please check out all the Wishlist features I’m championing :gem_stone: , add your comments, and up vote them :white_check_mark: .

Thank you in advance :busts_in_silhouette::busts_in_silhouette::busts_in_silhouette:……

Kind regards,

mw :technologist:t4:

16

Hey there, @user30741 – nice to see you in our cozy Community!

No worries, I’m here to assist while Max is on a well-deserved vacation :smiling_face:

If I got it right, you want:

  1. Have a map view open by default on mobile.
  2. Move the View List and View on Map buttons higher (above the map/locations) for better visibility.

If so, I’ll be glad to consult our dev team about the customization – just let me know :raising_hands: