scotia weather widget

index.html

<div class="weather-container">
  
  <a class="weatherwidget-io" href="https://forecast7.com/en/40d48n124d10/scotia/?unit=us" data-label_1="SCOTIA" data-label_2="WEATHER" data-font="Roboto" data-icons="Climacons Animated" data-mode="Forecast" data-days="3" data-theme="pure" >SCOTIA WEATHER</a>

  <a class="weatherwidget-io" href="https://forecast7.com/en/39d15n123d21/ukiah/?unit=us" data-label_1="UKIAH" data-label_2="WEATHER" data-font="Roboto" data-icons="Climacons Animated" data-mode="Forecast" data-days="3" data-theme="pure" >UKIAH WEATHER</a>

  <a class="weatherwidget-io" href="https://forecast7.com/en/39d45n123d81/fort-bragg/?unit=us" data-label_1="FORT BRAGG" data-label_2="WEATHER" data-font="Roboto" data-icons="Climacons Animated" data-mode="Forecast" data-days="3" data-theme="pure" >FORT BRAGG WEATHER</a>

</div>

<style>
  .weather-container {
    display: flex;         /* Forces the widgets inline */
    flex-wrap: wrap;       /* Allows them to wrap to the next line smoothly on small screens */
    gap: 15px;             /* Adjust this number to add more or less space between them */
  }

  .weather-container .weatherwidget-io {
    flex: 1;               /* Optional: Makes all widgets expand to share equal width */
    min-width: 250px;      /* Prevent widgets from getting too squished on mobile devices */
  }
</style>

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>