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; } }