From f54fb242627166fdc45a9577aabe0fcc4d1c5423 Mon Sep 17 00:00:00 2001
From: Felix Brucker <felix@felixbrucker.com>
Date: Fri, 10 Nov 2023 01:28:27 +0530
Subject: [PATCH] Improve profile image layout on mobile

---
 src/app/my-farmer/my-farmer.component.html |  2 +-
 src/app/my-farmer/my-farmer.component.scss | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/my-farmer/my-farmer.component.html b/src/app/my-farmer/my-farmer.component.html
index 24ed099..8261866 100644
--- a/src/app/my-farmer/my-farmer.component.html
+++ b/src/app/my-farmer/my-farmer.component.html
@@ -24,7 +24,7 @@
       </ngb-alert>
     </div>
     <div class="row mb-1">
-      <div class="col-auto my-auto pe-0" *ngIf="accountImageUrl$ | async">
+      <div class="col-auto my-auto pe-0 profile-picture-image-wrapper" *ngIf="accountImageUrl$ | async">
         <img [src]="accountImageUrl$ | async" class="img-fluid rounded profile-picture-image">
       </div>
       <div class="col col-md">
diff --git a/src/app/my-farmer/my-farmer.component.scss b/src/app/my-farmer/my-farmer.component.scss
index d496ab5..2d7356b 100644
--- a/src/app/my-farmer/my-farmer.component.scss
+++ b/src/app/my-farmer/my-farmer.component.scss
@@ -111,11 +111,20 @@
     max-height: 5.6rem;
   }
 }
-@media (max-width:472px) {
+@media (max-width:512px) {
   .profile-picture-image {
     max-height: 7.2rem;
   }
 }
+@media (max-width:454px) {
+  .profile-picture-image-wrapper {
+    width: 100%;
+    text-align: center;
+  }
+  .profile-picture-image {
+    margin-bottom: 0.5rem;
+  }
+}
 @media (max-width:576px) {
   .nav-tabs-no-border {
     border: unset;