Adjusting Map Style and Contact Column Width

kullus · February 27

Hello,

I would like to change the style of the map, which is currently using Map Advanced. How can I display rounded corners so that the map is not so rectangular but matches the style of other elements on the page?

Secondly, regarding the contact information column – how can I make it wider so that, for example, an email address fits on a single line?

url: https://kolimisveod.veebilahendus.ee/ pw: 12345

map style betheme.png

158.32 KB

Thank you!

Steve

Phil · February 28

Hi,

Try the following CSS code:

.google-map-wrapper .google-map{
 border-radius: 40px;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

kullus · February 28

great, it workedm thx! Secondly, regarding the contact information column – how can I make it wider so that, for example, an email address fits on a single line?

Phil · February 28

Here you go:

.google-map-wrapper .google-map-contact-wrapper .get_in_touch{
 width: 300px;
}

Best regards

kullus · March 3

Great, thx! 1 more thing, how can show this box with rounded corners like the rest of map?

Phil · March 3

Try this one:

.google-map-wrapper .google-map-contact-wrapper{
 border-radius: 20px;
}

Best regards

kullus · March 4

Worked like a charm, thx!

kullus · March 6

1 more setting with it, on phone, it don´t look so good. Can add space between map and contact info box?

url: https://kolimisveod.ee/ pw: 12345

Phil · March 6

Use this CSS:

@media only screen and (max-width:767px){
 .google-map-wrapper .google-map-contact-wrapper{
   margin-bottom: 32px;
 }
}

Best regards

Adjusting Map Style and Contact Column Width

Comments