Store Locator Photo Customization

Ask the Community Customization
1

Hello,

I would like to change the object-fit of the image in the Detailed Card at the top, from ‘cover’ to ‘contain’, will you please help me?

Thank you :slight_smile:

1 Like
3

Happy to see you on our forum! Welcome @Foulianna_FouaGraf :wave:

Here is the code we’ve added to the Custom CSS field on the Style tab of your widget’settings:

global-styles,
[class*="Preview__Container-sc"] [class*="MediaImage__Container-sc"] img {
  object-fit: contain !important;
}

Check your widget and let me know if you like the result :wink:

1 Like
4

Thank you so much!
Actually it works and it’s exactly what I was looking for, but when I embed the script in my website (via HTML Elementor widget) it’s not working (I mean the custom CSS has no impact).
Do you have any idea why this is happening?

5

Could you please share a link to the page where your widget is installed? I’ll be happy to look into this for you :slightly_smiling_face:

1 Like
6

Thank you so much for your help, I appreciate it!
Apparently, I deleted the script, updated the page, and re-pasted it in the HTML widget.
Now it works just fine! Probably some Elementor conflict?!
Anyway, I’m good for now, thank you again! :slight_smile:

1 Like
7

I’m also trying to change the marker on the map to be another color if selected, so it will be more obvious (currently it only changes its size slightly).
If I may suggest, it could take color from the Accent, to be easily customisable.
Here is the CSS I use but it doesn’t work:

global-styles,
[class*=“elfsight_map”] [class*=“marker__Container-sc”].active svg path {
fill: black !important;
}

I could use your advice, thank you! :slight_smile:

1 Like
8

Hi @Foulianna_FouaGraf :wave:

Got it! I’ll discuss with our devs if it’s feasible and will get back to you a bit later :slightly_smiling_face:

1 Like
9

We’ve added this code to the widget:

.global-styles,
[class*="elfsight_map"].active [class*="marker__Container-sc"] svg path {
  fill: black !important;
}

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

1 Like
10

It works, thank you so much!!!
It was a silly mistake of mine, I guess I’m still learning!
I really appreciate your help!
Still, if I may suggest, it would be awesome for the store locator app to have an option to select different color for the active location, I believe many users would like to use it without custom CSS, so please consider this suggestion as a ‘user testing feedback’.
Thank you again! :slight_smile:

1 Like
11

Glad to hear that the solution worked :wink:

I agree that it would be helpful to have such an option in the editor and I’ve added your idea to the Wishlist. You can keep tabs on it here - Option to change the color of the cohose marker

1 Like