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.

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:

10

Thanks Max.

Works perfectly.

mw

1 Like
11

You’re most welcome :slightly_smiling_face:

1 Like