html div with max size

Question

I have a simple web page containg a single div element holding a leaflet map, and some javascript code.

On mobile devices, I'd like the div element to fill the entire screen. But, on larger screens such as PC screens, I'd like the div element to have a maximum size of, say, 800x600 pixels. Otherwise, the leaflet will become too slow.

How do I go about to implement that?

Answer 1

You can try this...

<style type="text/css">
 div{
   width: 800px;
   height: 600px;
 }
 @media only screen and (max-width: 767px){
  div{
    width: 100%;        
  }
 }
</style>