From 2494bcdc47d75de22af8ec46accb30b3b7404348 Mon Sep 17 00:00:00 2001
From: Dean Attali <daattali@gmail.com>
Date: Mon, 2 Mar 2015 13:48:04 -0800
Subject: [PATCH] fix avatar to work in small screens even when title is long

---
 css/main.css | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/css/main.css b/css/main.css
index ca3135c..9ce7b66 100644
--- 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,14 +148,11 @@ 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);
@@ -163,7 +160,6 @@ img::-moz-selection {
   
   .navbar-custom .avatar-container  .avatar-img {
     width: 100%;
-	height: auto;
   }
 }