Unresponsive page layout with ReactMapGL in ReactJs - html

Question

I have a ReactMapGL component in my page that is stored above the footer and below the navbar. In my initial screen from my desktop the layout looks fine, but when I inspect element to make the screen size smaller, the layout becomes unresponsive.
So far this is my code for this particular page:
export default function Map({posts}) {
const [viewport, setViewport] = useState({
latitude: 45.4211,
longitude: -75.6938,
width:"100vw",
height:"100vh",
zoom: 10,
});
const [selectedProperty, setSelectedProperty] = useState(null)
return (
<div>
<ReactMapGL {...viewport} mapboxApiAccessToken="//mykey"
mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
onViewportChange={viewport => {
setViewport(viewport);
}}>
{
posts &&
posts.map((maps) => (
<Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
<button className="marker-btn" onClick={e => {
e.preventDefault();
setSelectedProperty(maps);
}}>
<img src="placeholder.svg"/>
</button>
</Marker>
))}
{selectedProperty ? (
<Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude}
onClose={() => {setSelectedProperty(null);}}>
<h1>{selectedProperty.Title}</h1>
</Popup>) : null}
</ReactMapGL>
</div>
);
}
For the Navbar and footer I have copy pasted the html and css from here.