CODEWITHSUNDEEP
javascripthtmlcss
ChuChu
ChuChu

Reputation: 359

How can I move the weather icon next to the weather condition?

My icon is hanging low at the left corner of the screen. I'd love to know the >fastest way to place it next to the weather condition (right below Your >Location).

Link to Codepen 

<div class="container">
  <h1 class=" text-center"> Your Local Current Weather</h1> <br>
  <div>
    <h2 id="location" class="text-center"> </h2>
    <h2 id="condition" class="text-center">
    </h2>

    <h2 class="text-center" style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></h2>
    <canvas id="icon" width="100" height="100"></canvas>

  </div>
</div>

Upvotes: 0

Views: 55

Answers (1)

Aaqib
Aaqib

Reputation: 10370

Place Canvas tag right after Your Local Current Weather : 

<body>
  <div class="container">
  <h1 class= " text-center"> Your Local Current Weather</h1> <br>
    <canvas id="icon" width="100" height="100"></canvas>
  <div>
  <h2 id = "location" class = "text-center"> </h2>
  <h2 id= "condition" class="text-center">
     </h2>

  <h2 class="text-center" style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></h2> 

    </div>
  </div>

</body>

and add this in CSS:

#icon {
 position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -10%)
}

I have updated it HERE

Upvotes: 1

Related Questions