Improve profile image layout on mobile

foxypool · Nov 9, 2023 · f54fb24 · f54fb24
1 parent d99fc45
commit f54fb24
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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;