Horizontal scroll container - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 13, 2025 at 12:20 pm #1487965

95mc
Participant

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
Moderator
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
Participant

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
Participant

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.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.