AsiaHomeB/modules/ruling_weather/_ruling_weather_widget1.html.erb

<div>
  <style type="text/css">
    .weather_widget1{
      background: none;
      display: inline-block;
      width: 100%;
      padding: 1.5em 0.8em;;
      font-size:inherit;
      font-weight: 500;
      background: #accbe7;
    }
    .weather_widget1 .white_text{
      color: #333;
      font-size:inherit;
      overflow-wrap: break-word;
    }
    .weatherICON{
      padding: 0;
    }

    .weatherTXT{
      font-weight: 700;
    }
    .UviItem{
      font-weight: 700;
    }
    .weatherItem{
      font-weight: 700;
    }
    .weatherBlock{
      margin-bottom:1em;
    }
    @media(min-width:769px){
      .weatherICON img{
          width: 60%;
      }
      .weather_widget1{
          text-align: center;
      }
    }
    @media(max-width:769px){
      .weatherICON img{
        width: 100%;
        }
      .weatherICON {
        padding: 0;
        width: 50%;
        margin: auto;
      }
      .one{
          float: left;
      }
      .two{
          float: right;
      }
      .three{
          clear: both;
          float: left;
      }
      .four{
          float: right;
      }
      .five{
          clear: both;
      }
    }

  </style>
  <div class="weather_widget1" data-list="weather" data-level="0">
    <div class="col-sm-12 columns weatherBlock">
      <div class="col-sm-4 columns weatherICON">
        <img src="{{wx_svg}}" data-name="wx_svg" title="{{wx_text}}" alt="{{wx_text}}" />
      </div>
      <div class="col-sm-4 columns one">
        <div class="weatherTXT" data-name="wx_text">{{wx_text}}</div>
        <div class="Tempature white_text" data-name="avgt">{{avgt}}<span>℃</span></div>
      </div>
      <div class="col-sm-4 columns two">
        <div class="UviItem">{{uv-head}}</div>
        <div class="UviText white_text" data-name="uvi_text">{{uvi_text}}</div>
      </div>
    </div>
    <div class="col-sm-12 columns weatherBlock">
      <div class="col-sm-4 columns three">
        <div class="weatherItem">{{relative_humidity-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="rh">{{rh}}</span>%</div>
      </div>
      <div class="col-sm-4 columns four">
        <div class="weatherItem">{{current_wind_speed-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="ws">{{ws}}</span>m/s</div>
      </div>
      <div class="col-sm-4 columns five">
        <div class="weatherItem">{{accumulated_rainfall-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="rain">{{rain}}</span>mm</div>
      </div>
    </div>
  </div>
</div>