Jump to content

Customise Advanced Map pop-up

Recommended Posts

Site URL: https://www.atuttatuscia.it/

Hi, I would like to customise the pop-up layout used on my Advanced Map plugin.

site https://www.atuttatuscia.it/
password Access

Specifically, I would like to:

  1. Reduce the gap at the top before the title
  2. Change background colour and text colour of the Category that appears under the tile (to match the category icons/buttons)
  3. Adjust the size of the pop-up to avoid the need for scrolling wherever possible
  4. Add a CTA button or CTA text (saying Scopri di più) leading to the page, which is now accessed by clicking on the title

Grateful for any assistance.

Debora

Link to comment
  • Replies 3
  • Views 509
  • Created
  • Last Reply

Top Posters In This Topic

#1. You mean this gap?

image.thumb.png.af0029d6e8f913ba7065f26910366638.png

#2. Which are you referring to?

#3. Try this code to Custom CSS box

@media screen and (min-width:768px) {
.custom-map-block .gm-style .gm-style-iw-c {
    max-width: 700px !important;
    max-height: 700px !important;
    min-height: 700px;
}
#block-yui_3_17_2_1_1726264944397_2943 .gm-style-iw-d {
    width: 100% !important;
    max-height: unset !important;
}
}

#4. I think you can add a link under text, then we can turn its style to a button style

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan, thank you for reply, sorry I was unclear.

#1. I was referring to the pop-up within the map, and the gap between the title and the top edge of the pop-up (see image).

#2. I am also referring to the pop-up within the map, and the category label that sits just under the title (see image).

image.thumb.png.e3fd3bb35c53cbfc329748531999ac99.png

#3. I have tried the code above, but the pop-up becomes huge but it's content does not display correctly, ie I can only see the title and the top part of the image, everything else is blank and the scrollbar doesn't work (see image). What I am trying to achieve is to adjust the size of the pop-up to avoid the need for scrolling wherever possible.

image.thumb.png.bac2d0dde94a1173806a970124a159c9.png

#4. Great, didn't realise this, I have just added a text link so this is resolved now, thank you.

 

Thanks again.
Debora

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.