Local weather with Google API and Weather Underground

Hi campers,

This is my implementation of local weather app. I use Google API to show, at least exact location (compare with location from other APIs, Google is the most accurate) with the panorama view. I also use Weather Underground API to show us local weather and temperature.

However, I have difficulty to create responsive design, in order to be use in mobiles. Somehow, I am still not able to find a way to change pixel based value to percentage from this code below:

#pano, #map { height: 300px; width: 585px; }

Give me a shout if you happen to know to make it this app responsive. Thanks for your feedback and support so far. Keep the spirit up and never give up!

1 Like

I would use a media query to change the width at around 768px.

@media (max-device-width: 768px) {
    pano,
    #map {
        height: 100px;
        width: 80%;
    }
}

I don’t know if those are the exact numbers I’d use, but that’s the basic idea.

its been a while since you posted but this was the first weather proj i checked out. it took a little while for the geolocation to kick in but it nailed my position right on the money. i had to drag the little guy over to the waypoint but once i did it showed my driveway. someone elses car was there so im guessing the street view shots are at least two years old. not bad considering all the roads in the world.

Hi Ben, hopefully it also give you a correct report for the weather. AFAIK, google API give the accurate position compare to other API method using IP address etc.