Use CSS to mess with user interface

Use CSS to mess with user interface of Windy map. All the stuff is well under #windy selector. Just make sure that Windy logo, remains unscaled, clickable and with opacity 1 (free version of the API).

Source code

        
<html>
  <head>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://api4.windy.com/assets/libBoot.js"></script>
  	<style>
  		#windy {
  			width: 100%;
  			height: 300px;
  		}
  	</style>
  </head>
  <body>
    <div id="windy"></div>

    <style>
        #windy #bottom,
        #windy #mobile-ovr-select,
        #windy #embed-zoom {
            display: none !important;
        }

        #windy #logo-wrapper {
            top: initial;
            bottom: 40px;
        }

        #windy #logo-wrapper #logo {
            left: 50px;
        }
    </style>
    <script>
        const options = {
            key: 'PsLAtXpsPTZexBwUkO7Mx5I',
        }

        windyInit( options, windyAPI => {})
    </script>

  </body>
</html>


        
Fork me on GitHub