GoggleMaps behave strange

Hi Dan
With your help I have created a Goggle-Map. But when I inset the HTML-file in my webside it will not work with different screens.
If I let the width stay with 600 it change the look on iPhone, and if I set the width to 400 it work with iPhon but does not look nice on larger screens.

And another little problem: How do I change the > in the menu to white?
Bjarne




The Google map should be responsive, it probably depends what you have it wrapped in. Set the grid item or container to the width you want at the various break point.

If you share your project I can take a look and advise :slight_smile:

Re: White arrow, do you mean the one in the Scroll to top component? And if so did you just want to change the colour of it?

I have tried a lot of setting with Width - and there are a lot! But with no better result.
I think the problem is with the HTML-file (Costume element), because it works if I put a picture in the grid.
Hope you can help?

I forgot to send the Projekt - Send in Element Cloud: BL-Portal2?

The arrow is the one within the Menu:

Here is the link:
elementsapp://downloadDocument/GoiefonWLjIj
Hope it’s the rigt one?

Thanks for the file!

We need to update the Menu Component to allow changing the colour of the drop down menus. It’s on the list and should be in the next couple of betas!

I adjusted the google maps code slightly and set the width to 100%, it seems to display much nicer now at the breakpoints. Is this what you wanted?

Here’s the code for the google map.

<div class="google-map w-[100%]">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23276.664917122267!2d11.941059748165069!3d43.17627420000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132bfdc4bd8869f9%3A0x75ae81d9477c5d80!2sSociet%C3%A0%20Agricola%20I%20Vicini%20S.r.l.!5e0!3m2!1sen!2sdk!4v1733746760291!5m2!1sen!2sdk" width="100%" height="350" style="border:1;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

And here’s the just the map part of your layout in a test project - Download Project.

Let me know if you need anything else :smiling_face:

Hi.Dan.
Thank you. That what I wanted!

1 Like

Oh super, pleased I could help :grinning: