Fixes #1: Fix icons under graph looking weird

MarcHagen · Apr 5, 2020 · 1ccfe52 · 1ccfe52
1 parent f3a65cc
commit 1ccfe52
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com), and this
 
 ## 1.6.3 - (FUTURE)
 
+### Bug Fixes
+
+* [#1](https://github.com/MarcHagen/weather-card/issues/1) - Fixed icons under graph looking weird
+
 ## 1.6.2 - 2020-02-17
 - Added option for locale
 - Added wind force for metric (Bft)

diff --git a/dist/weather-card.js b/dist/weather-card.js
@@ -420,11 +420,7 @@ class WeatherCard extends LitElement {
       <div class="conditions">
         ${this.forecast
           .map(forecast => html`
-                <i class="icon"
-                  style="background: none, url('${this.getWeatherIcon(
-                    forecast.condition.toLowerCase()
-                  )}');"
-                ></i>
+             <i class="icon" style="background: none, url('${this.getWeatherIcon(forecast.condition.toLowerCase())}') no-repeat; background-size: contain"></i>
           `)}
       </div>
     `;
@@ -842,6 +838,10 @@ class WeatherCard extends LitElement {
         align-items: center;
         margin: 0px -12px 0px 5px;
       }
+      
+      .conditions .icon {
+        margin-top: -10px;
+      }
     `;
   }