embed map viewed on mobile device

TimHayes3 · ‎12-16-2024

Hello,

I am using the embed map HTML code from Map Viewer.

I see that the map style part of the code has a fixed height and width: <arcgis-embedded-map style="height:600px;width:700px;"

Can a ratio or percentage be provided to accommodate different screen sizes? Over 50% of the people who visit our site are on mobile.

ZaraMatheson

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    }
  </style>
  <script type="module" src="https://js.arcgis.com/embeddable-components/4.31/arcgis-embeddable-components.esm.js"></script>
</head>
<arcgis-embedded-map style="height:75%;width:50%;" item-id="cf35269c59cd45cc9bfae3480c0a64d7" theme="light" portal-url="https://arcgis.com" information-enabled>

</html>

Hello! You should be able to use a % for the width or height of the embedded map as long as the body or containter has a height/width defined. The above works for me.

TimHayes3

Thank you for the response, Zara. Will this work in an iframe? here is the code I am using:

Where would I add the % of width and height in this code?