AmCharts Map not optimising on mobile

Site URL: https://www.lexiconhouse.com/about

I'm hoping someone can help, as I've not been able to solve the issue.

I copied in an HTML code into a code box at the bottom of this page to get an interactive map: https://www.lexiconhouse.com/about

The problem is that it doesn't optimise on mobile, it looks too big. And actually it is a little smaller than the width of the page on desktop. Images attached.

I've seen an AmCharts map on a Squarespace site that does optimise fine so I know it's possible to do it, but I'm at a loss how.. I'd appreciate any help!

 

Hi
Please use this code in Design -> Custom CSS.

 

.sqs-block-code div#mapdiv {
    max-width: 100%;
}

let me know please if it works!
Best,
Leopold

Thank you! It ALMOST worked!

The bottom bar didn't get smaller on mobile for some reason.. but it's perfect on desktop.

Do you think I could delete that part in the map HTML code?

I'll paste below

 

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>

<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>

<script src="https://www.amcharts.com/lib/3/themes/dark.js" type="text/javascript"></script>

<div id="mapdiv" style="width: 1000px; height: 450px;"></div>

<div style="width: 1000px; font-size: 70%; padding: 5px 0; text-align: center; background-color: #DDE8F0; margin-top: 1px; color: #FCFBF0;"><a href="https://www.amcharts.com/visited_countries/" style="color: #FCFBF0;">Create your own visited countries map</a> or check out the <a href="https://www.amcharts.com/" style="color: #FCFBF0;">JavaScript Charts</a>.</div>

<script type="text/javascript">

var map = AmCharts.makeChart("mapdiv",{

type: "map",

theme: "dark",

projection: "mercator",

panEventsEnabled : true,

backgroundColor : "#DDE8F0",

backgroundAlpha : 1,

zoomControl: {

zoomControlEnabled : true

},

dataProvider : {

map : "worldHigh",

getAreasFromMap : true,

areas :

[

{

"id": "AT",

"showAsSelected": true

},

{

"id": "AZ",

"showAsSelected": true

},

{

"id": "BE",

"showAsSelected": true

},

{

"id": "BG",

"showAsSelected": true

},

{

"id": "HR",

"showAsSelected": true

},

{

"id": "CZ",

"showAsSelected": true

},

{

"id": "DK",

"showAsSelected": true

},

{

"id": "EE",

"showAsSelected": true

},

{

"id": "FR",

"showAsSelected": true

},

{

"id": "DE",

"showAsSelected": true

},

{

"id": "GR",

"showAsSelected": true

},

{

"id": "HU",

"showAsSelected": true

},

{

"id": "IT",

"showAsSelected": true

},

{

"id": "LV",

"showAsSelected": true

},

{

"id": "LI",

"showAsSelected": true

},

{

"id": "LT",

"showAsSelected": true

},

{

"id": "LU",

"showAsSelected": true

},

{

"id": "MT",

"showAsSelected": true

},

{

"id": "MD",

"showAsSelected": true

},

{

"id": "NL",

"showAsSelected": true

},

{

"id": "PL",

"showAsSelected": true

},

{

"id": "PT",

"showAsSelected": true

},

{

"id": "RO",

"showAsSelected": true

},

{

"id": "RU",

"showAsSelected": true

},

{

"id": "RS",

"showAsSelected": true

},

{

"id": "SK",

"showAsSelected": true

},

{

"id": "ES",

"showAsSelected": true

},

{

"id": "CH",

"showAsSelected": true

},

{

You're welcome!
Replace this code with your part code

<div style="width: 1000px;font-size: 70%;padding: 5px 0;text-align: center;background-color: #DDE8F0;margin-top: 1px;color: #FCFBF0;max-width: 100%;"><a href="https://www.amcharts.com/visited_countries/" style="color: #FCFBF0;">Create your own visited countries map</a> or check out the <a href="https://www.amcharts.com/" style="color: #FCFBF0;">JavaScript Charts</a>.</div>

You can use display:none; CSS after max-width:100% to hide it. (On desktop and mobile) If you want to hide on mobile need to use media query.
Please use like button if it helps you!

Best,
Leopold

Thank you so much Leopold!

That worked out perfectly! I hid the bottom bar and it looks great! I really appreciate your help! Couldn't have done it without you! Have a wonderful day :)

Leopold, one more quick question. The map looks perfect on mobile and fits the screen but on desktop it went back to its original smaller size. I altered the code a little to expand the width and it looks fine now, but as I'm really a novice I hope I did it correctly! I just changed the width from  <div style="width: 1000px; to <div style="width: 1300px; in the two places it appears in the code. Is that a viable solution?

Full section below:

<div id="mapdiv" style="width: 1300px; height: 450px;"></div>
<div style="width: 1300px; font-size: 70%; padding: 5px 0; text-align: center; background-color: #DDE8F0; margin-top: 1px; color: #FCFBF0;max-width: 100%;display:none;”><a 

Glad it helps you dear!
Change your width:1300px to width:100%; in your both code. it will fit to 100% of your screen!

Best,
Leopold

Oops! Perfect! I'm glad I asked!!