Made avatar responsive

mohsenmojadam2019 · Jul 16, 2022 · 2a1c8f4 · 2a1c8f4
1 parent 1219e31
commit 2a1c8f4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/src/templates/default/components/Biography.tsx b/src/templates/default/components/Biography.tsx
@@ -20,31  20,10 @@ const Biography: FC<Props> = ({
 
   return (
     <header>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "flex-end",
-        }}
-      >
       <div className="mk-biography__header-top">
         {avatar && (
-          <div
-            style={{
-              marginRight: "1em",
-              marginBottom: "0.5rem",
-            }}
-          >
-            <img
-              src={avatar}
-              style={{
-                width: "135px",
-                height: "135px",
-                objectFit: "cover",
-                verticalAlign: "middle",
-                objectPosition: "center",
-                filter: "grayscale(100%)",
-              }}
-              alt={fullName}
-            />
           <div className="mk-biography__avatar">
             <img src={avatar} alt={fullName} />
           </div>
         )}
 

diff --git a/src/templates/default/styles/index.css b/src/templates/default/styles/index.css
@@ -50,6  50,25 @@
   filter: grayscale(1);
 }
 
 .mk-biography__header-top {
   display: flex;
   align-items: flex-end;
 }
 
 .mk-biography__avatar {
   margin-right: 1em;
   margin-bottom: 0.5rem;
 }
 
 .mk-biography__avatar img {
   width: 135px;
   height: 135px;
   object-fit: cover;
   vertical-align: middle;
   object-position: center;
   filter: grayscale(100%);
 }
 
 @media (max-width: 920px) {
   #app {
     padding: 2em 1.5em;
@@ -68,3  87,19 @@
     height: 1em;
   }
 }
 
 @media (max-width: 520px) {
   .mk-biography__header-top {
     display: block;
   }
 
   .mk-biography__avatar {
     margin-right: 0;
   }
 
   .mk-biography__avatar img {
     width: 100%;
     height: 250px;
     margin-bottom: 0.5rem;
   }
 }