Force mobile view

[Kasper_Skov_Jensen]

Hi

How do I force my store locator widget to always show in the mobile view?

[Irene]

Hi there, @Kasper_Skov_Jensen

Please try this CSS code:

.global-styles,
[class*="widget__Container-sc"] {
    width: 600px !important;
}

You can make the width less by changing the pixel amount

Does this work for you?

[Kasper_Skov_Jensen]

Hi @Irene

I’m still seeing a bit of the map.

I would like to only have the list (like it is on mobile)

[Irene]

I see. Let’s try it with another width value:

.global-styles,
[class*="widget__Container-sc"] {
    width: 480px !important;
}

Does it look good for you now?

[Kasper_Skov_Jensen]

Hmmm… same issue.

Another fix is to get the pop op to open on top of the widget in stead of on top of the page

[Irene]

Oh, so sorry for this! Seems to have worked good on my end

Could you please send me a direct link to the webpage with the widget? The devs will take a look for you

[Kasper_Skov_Jensen]

Derfor skal du komme til Åbent Hospital

[Irene]

Thanks!

I noticed that the code I sent was applied at the Custom JS section of the widget instead of the Custom CSS on the Style tab. I moved the code there and it worked

Could you please check it one more time?

[Kasper_Skov_Jensen]

My bad!

Thank you so much

I still think it would be a usable setting to have the pop up showing on the widget instead of at the top of the page.

[Max]

Hi there, @Kasper_Skov_Jensen

I’ve checked your widget and see that the popup covers the whole page and appears at the top. To display it at the center and reduce it, please try to use the CSS code below:

[class*="layout-background__StyledWidgetBackground-sc"],
[class*="location-card__Container-sc"],
[class*="location-card-popup__ScrollableWrapper-sc"],
[class*="location-card-popup__StyledPopup-sc"] {
  height: auto !important;
  min-height: auto;
}

[class*="Popup__PopupInner-sc"] {
  align-items: center;
  justify-content: center;
}

[class*="location-card-popup__StyledPopup-sc"] {
  max-width: 480px;
}