Map disappears on screen sizes less than tailwinds lg breakpoint #67
Description
Not sure what's happening with it, but everything I try, it just seems to either not render or render under/over the other column.
Any help would be much appreciated!
<div class="bg-black py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div class="grid grid-cols-1 gap-8 lg:gap-16 text-base leading-7 text-white max-w-none lg:grid-cols-2">
<div class="relative">
<MapboxMap
map-id="locationMap"
class="w-full h-96 rounded-3xl"
:options="{
style: 'mapbox://styles/mapbox/dark-v11', // style URL
center: [blok.latitude, blok.longitude], // starting position
zoom: 14, // starting zoom
}"
>
<MapboxNavigationControl
position="top-right"
:options="{
showCompass: false,
}"
/>
<MapboxDefaultMarker
class="text-lft-400"
:options="{
color: '#ffcd16',
}"
:lnglat="[blok.latitude, blok.longitude]"
marker-id="marker1"
>
</MapboxDefaultMarker>
</MapboxMap>
</div>
<div class="relative">
<h2 class="text-3xl text-white font-extrabold tracking-tight text-wite sm:text-4xl">
{{ blok.heading }}
</h2>
<p class="mt-6 text-xl font-medium leading-8 text-neutral-300">{{ blok.lead }}</p>
<dl class="mt-10 space-y-4 text-base leading-7 text-neutral-300">
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Address</span>
<span class="i-heroicons-building-office-2 text-lft-400 h-6 w-6"></span>
</dt>
</div>
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">What Three Word</span>
<span class="text-red-500 font-bold text-lg mx-0.5">///</span>
</dt>
</div>
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Telephone</span>
<span class="i-heroicons-phone text-lft-400 h-6 w-6"></span>
</dt>
<dd>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>Above LG Works:
Below LG doesn't:
