Google map block customisation and link transitions

Site URL: https://iguana-chinchilla-xt92.squarespace.com/location

Hi, 

Does anyone know if it is possible to round the corners of your map block? I've tried block id and border-radius but it just makes the border rounded with the map over the top....

Also does anyone know how to add a transition on the :hover of a link? I'm trying to figure out how to transition my page links with a smooth in and out transition.

pw for url: chocolate

On 11/5/2021 at 6:19 PM, failbetter said:

Site URL: https://iguana-chinchilla-xt92.squarespace.com/location

Hi, 

 

Does anyone know if it is possible to round the corners of your map block? I've tried block id and border-radius but it just makes the border rounded with the map over the top....

Also does anyone know how to add a transition on the :hover of a link? I'm trying to figure out how to transition my page links with a smooth in and out transition.

pw for url: chocolate

Hi,

The url doesn't exist

You mean map on this url? https://iguana-chinchilla-xt92.squarespace.com/welcome/#location

Sorry I put the wring URL!!!

https://hibiscus-lobster-rxx5.squarespace.com/location

pw:chocolate

On 11/8/2021 at 4:33 PM, failbetter said:

Sorry I put the wring URL!!!

 

https://hibiscus-lobster-rxx5.squarespace.com/location

pw:chocolate

 

 

 

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1627391762979_3268 {
    border-radius: 10px;
}

Yeah i've tried that already but it just changes the shape of the block and the map sort of sits on top....

On 11/11/2021 at 10:12 PM, failbetter said:

Yeah i've tried that already but it just changes the shape of the block and the map sort of sits on top....

Don'nt remove any code. Use this code under

div#block-yui_3_17_2_1_1627391762979_3268>div {
    border-radius: 40px;
}

@tuanphan Thank you that pesky div was the problem then! 

Hi! I am having the same issue and cannot seem to make the corners round for the map block

https://green-purple-znbx.squarespace.com/config/pages

On 11/21/2023 at 3:53 AM, abf9 said:

Hi! I am having the same issue and cannot seem to make the corners round for the map block

 

https://green-purple-znbx.squarespace.com/config/pages

Try this CSS code

div.map-block>div {
    border-radius: 40px;
}