Google map info box customization

Hi,

I have been trying to do 2 different things:

– first, I would like to EITHER reduce the height of the info box located above the google map OR drag it down a little bit (so that it is not on the marker). Note: I would be happy if the box did not touch the two top buttons on the map (see screenshot).
– Second, I would like this box to be transparent and add a custom color.
I have tried to add this CSS this but it won’t work :

.woodmart-google-map-content .reset-last-child {
background: rgba(197,91,82,0.4);
}

thanks a lot for the help!
Kind regards.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached and visited your website. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-google-map-content-wrap>.woodmart-google-map-content {
	background-color: transparent;
	margin-top: 20px;
}

Best Regards.

Hi,

It works pretty well, thanks.
Last question though.

As you can see on the video link, the map marker is located under the box.
Two options here:
-Reduce the height of the box
-Keep the map settings unchanged but move the position of the map (a little bit down) so that when the page opens the map the marker is visible. (do not know whether this is possible or not). See video link for clarification.

Thanks for your patience.
Kind regards,

Hello,

You are Most Welcome.

1) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-google-map-content-wrap>.woodmart-google-map-content {
	height: 170px;
}

2) Please provide a relevant screenshot of how you want to change the position of the map to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hi,

thanks for the height solution. Worked perfectly!
Please find attached a video that shows you where I would like to place the map when the page opens (I do not want to move the map element but the position of the marker on the map). The idea is to have the marker a little lower.

Thanks for the help. Much appreciated.

Hello,

You are Most Welcome.

Sorry, but it is not possible because the Map is loaded from the Google Map API key and our theme doesn’t influence.

Best Regards.

[Author]

Posts