Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 13, 2025 at 12:20 pm #1487965
    95mc

    Hello,
    we’re redesigning a website and created a map with Draw Attention that looks great on a computer, but the mobile version is too small. On the old website, they created a horizontal scroll bar so we could see the larger villas. We’re trying to do this but can’t. We’ve only managed to remove the margins:
    #mapcontainer .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0;
    margin: 0;
    }

    Could you help us?

    Thanks in advance,

    BR,

    Antonio.

    August 14, 2025 at 7:12 am #1488009
    Ismael

    Hey Antonio,

    Thank you for the inquiry.

    Try adding this css code to make the map hotspot container scrollable. 

    #mapcontainer, #mapcontainer #hotspot-650 {
    min-width: 1200px;
    overflow: scroll;
}

#mapcontainer .avia_codeblock, #mapcontainer .avia_codeblock_section {
    width: 1200px;
}

    Best regards,
    Ismael

    August 14, 2025 at 9:07 am #1488015
    95mc

    Hi Ismael,

    I have tried and look perfect. I used only in mobile:
    @media only screen and (max-width: 767px) {
    #mapcontainer, #mapcontainer #hotspot-650 {
    min-width: 1200px;
    overflow: scroll;
    }

    #mapcontainer .avia_codeblock, #mapcontainer .avia_codeblock_section {
    width: 1200px;
    }
    }

    The issue is the scroll don’t move the container.
    Could you help me?

    Many Thanks,

    BR

    Antonio.

    August 14, 2025 at 10:09 am #1488018
    95mc

    Hi Ismael,

    I think it’s almost done, but at the end of the scroll, there’s a blank space that I don’t know how to remove.

    @media only screen and (max-width: 767px) {
    #mapcontainer .avia_codeblock_section {
    width: 1200px;
    }
    #mapcontainer {
    overflow-x: scroll;
    min-height: 500px;
    overflow-y: clip;
    }
    }

    Many thanks!

    BR,

    Antonio.

    August 18, 2025 at 3:53 am #1488163
    Ismael

    Hi,

    Apologies for the delay. Try to add this code below the previous css rules.

    #mapcontainer .avia_codeblock_section {
    width: 1200px;
    max-width: 1200px;
    overflow: hidden;
}

    Let us know the result.

    Best regards,
    Ismael

    August 18, 2025 at 11:16 am #1488173
    95mc

    Hi Ismael,

    No worries, works perfect!!
    Many thanks,

    BR,

    Antonio.

    August 18, 2025 at 5:14 pm #1488193
    Rikard

    Hi,

    Thanks for the update. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Horizontal scroll container’ is closed to new replies.