Fix margin top alignment issue on Safari (daattali#750)

deepmtch · Dec 8, 2020 · f8724aa · f8724aa
1 parent 327827b
commit f8724aa
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## Unreleased version
 
+- Slightly reworked margins and position for avatar image to resolve an alignment issue on Safari.
 - Changed the width at which the navbar collapses to a higher threshold because most modern non-mobile browsers are >1000px
 - Fixed bug where navbar secondary level dropdown items didn't inherit te same colour as the primary navbar links
 - Fixed bug where the navbar "burger" collapsed button didn't always revert back to a light colour

diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -311,7 +311,7 @@ img {
   position: absolute;
   left: 50%;
   width: 3.125rem;
-  margin-top: 3.1rem;
+  bottom: -1.5rem;
   transition: opacity 0.5s ease-in-out;
   -webkit-transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
@@ -349,6 +349,7 @@ img {
 @media (min-width: 1200px) {
   .navbar-custom.top-nav-regular .avatar-container {
     width: 6.25rem;
+    bottom: -1.9375rem;
   }
 
   .navbar-custom.top-nav-regular .avatar-container .avatar-img-border {