fix avatar to work in small screens even when title is long

daattali · daattali · commit 2494bcdc47d7 · 2015-03-02T13:48:17.000-08:00
diff --git a/css/main.css b/css/main.css
@@ -119,20 +119,20 @@ img::-moz-selection {
   -moz-transition: opacity 0.5s ease-in-out;
   transition: opacity 0.5s ease-in-out;
   left: 50%;
-  height: 100%;
-  bottom: -50%;
+  width: 50px;
+  margin-top: -25px;
 }
 .navbar-custom .avatar-container  .avatar-img-border {
+  width: 100%;
   border-radius: 50%;
   margin-left: -50%;
   display: inline-block;
   box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-  height: 100%;
 }
 .navbar-custom .avatar-container  .avatar-img {
-  height: 100%;
+  width: 100%;
   border-radius: 50%;
   display: block;
 }
@@ -148,22 +148,18 @@ img::-moz-selection {
 @media only screen and (min-width: 768px) {
   .navbar-custom .avatar-container {
     width: 100px;
-    margin-top: -50px; /* Because of the 20px padding of the navbar, we need +20 to be at the bottom, minus whatever proportion of the image height we want */
-	bottom: auto;
-	height: auto;
+    margin-top: -50px;
   }
   
   .navbar-custom .avatar-container  .avatar-img-border {
     width: 100%;
-	height: auto;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
     -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
     -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
   }
   
   .navbar-custom .avatar-container  .avatar-img {
     width: 100%;
-	height: auto;
   }
 }
 
