There is a macbook macbook and the client wants the card to be directly inside the macbook. But I have no idea how to do this? There are some assumptions.

    1 answer 1

    To adapt the map on the site under any resolution, you can use @media media queries. For example, if the card:

     <div id="map"></div>

    has a fixed height or width:

     #map { height: 600px; width: 100%; }

    then for screens with a width of 960px or less, you can choose the desired card size:

      @media screen and (max-width: 960px) { #map { height: 280px; width: 100%; } }

    Maps by default work fine with different screen resolutions. To better stylize it, you should also go to the google maps api documentation.

    Here are some resources to help you adapt to the screens: htmlbook habr mozilla.org w3schools