I have repositioned the user information and also added a tool to determine the screen size on the creator's page to facilitate development.

src/views/creators/CreatorBanner.vue

@@ -1,17 +1,17 @@
 <template>
+  <seize-indicator></seize-indicator>
+  
+  
   <!--  Bannière-->
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
       <!-- Social Network-->
-      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
+      <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
-        <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
+        <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
-          <div class="text-lg">1000+ Abonnés</div>
-          <div class="text-sm">500 Contacts en commun</div>
-        </div>
-        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
           <a
               v-for="socialNetwork in GetActiveSocialNetworkUrls()"
-              :href="socialNetwork.url" target="_blank"
+              :href="socialNetwork.url"
+              target="_blank"
               class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
             <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
             <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
@@ -22,40 +22,46 @@
 
 
     </div>    
+    
     <!--Banner & user info-->
     <div class="relative">
       <!--Banner-->
       <div>
         <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
       </div>     
-      <!--User info -->
-      <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
-        <div class="text-white">
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
-            <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }}</p>
-          </div>
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
-            <p :style="{ color: creator.profileColors.accent }">{{ creator.lastName }}</p>
-          </div>
-          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
-            <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
     <div class="bg-gray-800 py-4 relative shadow-lg min-h-24" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
-      <div class="flex flex-col sm:flex-row items-center sm:justify-between">
+      <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
+        <!-- Profile Image Wrapper -->
+        <div class="relative flex justify-center lg:w-auto lg:justify-start">
+          <!-- Profile Image -->
+          <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
             <img
-            class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
+                class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
                 :src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
                 alt="Profile Picture"
-            :style="{ borderColor: creator.profileColors.accent || '#A30E79', maxWidth: '250px', width: '100%' }"
+                :style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
-        >
+            />
-        <div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
+          </div>
+        </div>
+
+        <!-- User Info -->
+        <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
+          <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24">
+            <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }} {{ creator.lastName }}</p>
+          </div>
+          <div class="text-2xl text-center lg:text-left">
+            <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
+          </div>
+          <div class="text-lg" :style="{ color: creator.profileColors.accent }">1000+ Abonnés</div>
+        </div>
+
+        <!-- Buttons -->
+        <div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
           <button
               class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
               @click="isDialogActive = true">
@@ -79,6 +85,12 @@
     </div>
   </div>
 
+
+
+
+
+
+
   <!--Post-modale-->
   <v-dialog v-model="isDialogActive" max-width="500">
     <template v-slot:default="{ isActive }">
@@ -120,6 +132,7 @@
 
 import {defineProps, ref} from "vue";
 import {useUserStore} from "@/stores/user.js";
+import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
 
 const props = defineProps({
   creator: { type: Object, required: true },

src/views/main/DonationPopup.vue

@@ -1,5 +1,5 @@
 <template> 
-    <div class="fixed z-50 bottom-10 right-10 flex flex-column">
+    <div class="fixed z-50 bottom-6 right-6 flex flex-column">
       <div
           v-if="showPopup"
           ref="popup"

src/views/tools/SeizeIndicator.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="fixed bottom-0 left-0 m-4 z-50">
+    <div class="hidden sm:block md:hidden bg-blue-500 text-white p-2 rounded">
+      sm
+    </div>
+    <div class="hidden md:block lg:hidden bg-green-500 text-white p-2 rounded">
+      md
+    </div>
+    <div class="hidden lg:block xl:hidden bg-yellow-500 text-black p-2 rounded">
+      lg
+    </div>
+    <div class="hidden xl:block bg-red-500 text-white p-2 rounded">
+      xl
+    </div>
+  </div>
+</template>