Html - Weather Widget Icon Sizing

Schiftey
June 15, 2023
185 views
3 votes
3 Answers

I am trying to adjust the size of the forecast icons on this weather widget but am having zero luck. I’ve tried editing it in the HTML and CSS for the forecast-icon container and it still sits at the default 100×100 even with the container at 25×25. I am using a weather widget template specifically made for the program its going to run on so I’ve only made minor tweaks and I’m bad at JS so I don’t really know how to attempt editing the size down there like the current day icon is edited.

Below is the code and the JS is at the bottom where you can see the current day icon size can be manually set to 80×80 yet there’s nowhere for me to edit the forecast icons size.

I tried manually entering width and height in the div class forecast-icon
I tried editing the size in the forecast-icon CSS
I tried editing the img.setattribute in the JS script to have a custom size like the current day icon

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" />


<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>

</div>
<i id="message" class="citation"></i>

Answers

- JuliaDeanne
- June 15, 2023 at 7:04 pm
- 0 votes
0
Try adding the !important declaration to your height and width CSS code of .forecast-icon.
```
.forecast-icon {
  height: 25px !important;
  width: 25px !important;
  align-items: center;
  object-fit: contain;
}
```
Login or Signup to reply.

Target the img within the .forecast-icon container and set the width to 100% so that it’s relative to the container:

.forecast-icon > img {
  width: 100%;
}

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}
.forecast-icon > img {
 width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" />


<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>

</div>
<i id="message" class="citation"></i>

The resizing should be applied to .forecast-icon > img instead of modifying the .forecast-icon class.

.forecast-icon > img {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon > img {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" />

<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>
</div>

<i id="message" class="citation" />

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Weather Widget Icon Sizing

Answers