Perry Livingston Perry Livingston - 6 months ago 22
CSS Question

animated image drifts from center when window shrinks

There is a weather icon that is supposed to stay centered when the browser shrinks (i.e. to be displayed on mobile) but, it drifts to the right. Any ideas on how to fix it?
http://codepen.io/perrylivingston/full/JXqKWv/

<img id="partly_cloudy" src="http://icons.iconarchive.com/icons/icons8/android/512/Weather-Partly- Cloudy-Day-icon.png">
<div style:"text-align:center" id="the_weather"></div>
<!--<h1 style="text-align:center" id="demo_data">72&deg</h1>
<h5 style="text-align:center">BOSTON, MA</h5>
<h5 style="text-align:center">PARTLY CLOUDY</h5>
<h5 style="text-align:center">22&degC</h5>-->

<button class="js-geolocation"> Use Location</button>
<div style="text-align:center"><a href="https://twitter.com/share" class="twitter-share-button" data-text="I know the weather outside thanks to @Perryodical" data-size="large" target="_blank">Tweet</a></div>


CSS

body {
background-image: url("http://www.psdgraphics.com/file/blue-sky.jpg");
background-size: cover;
height: 100%;
width: 100%;
}

#the_weather {
width: auto;
text-align: center;
margin: 0px auto;
text-transform: uppercase;
color: #000;
}
/*#demo_data {
padding-top: 120px;
color: #000;
}
h5 {
color: #000;
font-weight: bold;
}
*/
@-moz-keyframes floating {
from {-moz-transform:translate(0, 1px);}
to {-moz-transform: translate(0, -10px);}
}

@-webkit-keyframes floating{
from {-webkit-transform:translate(0, 1px);}
to {-webkit-transform: translate(0, -10px);}
}

#partly_cloudy {
width: 80px;
height: auto;
position: absolute;
left: 50%;
margin-left: -2.4%;
margin-top: 30px;
-moz-animation-name:floating;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:floating;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}

@font-face {
font-family: 'the_weather';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
}


i {
color: #efcc3a;
font-size: 160px;
font-weight: normal;
font-style: normal;
}

#the_weather li {
display: block;
font-weight: bold;
padding: 5px;
}
/*WI portion of simpleweather.js not supported without paid subscription */
/*
.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }
*/
#the_weather ul {
margin: 0;
padding: 0;
}

button {
display: block;
margin: 15px auto;
width: 140px;
padding: 5px;
background:#efcc3a;
color: #0;
font-weight: bold;
border: 0;
border-radius: 5px;
}
button:hover {
background-color: #ed8e0e;
}
button:active {
color: rgb(217, 217, 217);
}
.twitter-share-button {
text-align: center;
box-shadow: 5px 5px 2.5px;
margin-bottom: 15px;
}


Javascript

if ("geolocation" in navigator) {
$('.js-geolocation').show();
} else {
$('.js-geolocation').hide();
}

$('.js-geolocation').on('click', function() {
navigator.geolocation.getCurrentPosition(function(position) {
loadWeather(position.coords.latitude+','+position.coords.longitude);
});
});


$(document).ready(function() {
loadWeather('New York','');
});

function loadWeather(location, woeid) {
$.simpleWeather({
location: location,
woeid: woeid,
unit: 'f',
success: function(weather) {
html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li>';
html += '<li>'+weather.alt.temp+'&deg;C</li></ul>';

$("#the_weather").html(html);
},
error: function(error) {
$("#the_weather").html('<p>'+error+'</p>');
}
});
}

Answer
#partly_cloudy {
width: 80px;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top: 50px;
margin: 0 auto;
-moz-animation-name:floating;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:floating;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}

try this, tho there is a problem because the icon is on top of the #the_weather its your choice on how you design it. regards.

UPDATE:
-margin-top: 30px; to padding-top: 50px;
-icon on top of the #the_weather. Fixed.

Comments