Finalized style for mobile phones

src/main/resources/static/css/userProfile2.css

@@ -83,6 +83,7 @@ and (max-device-width: 640px)
         flex-direction: column;
         align-content: flex-start;
         align-items: center;
+        border-radius: 5vw;
     }
     .userContainer {
         width: 80%;
@@ -140,11 +141,19 @@ and (max-device-width: 640px)
         }
 
     }
+    .empty-space {
+        height: 10svh;
+        width: 15em;
+        background: transparent;
+    }
     #allPacksContainer {
         padding-top: 3em;
         display: flex;
         overflow-x: scroll;
+        padding-inline: 20%;
         justify-content: space-between;
+        border-bottom: 10px solid rgba(139, 0, 0, 0.5);
+        margin-bottom: 2em;
         & .packName {
             font-size: 2em;
             height: 2.4em;
@@ -160,6 +169,7 @@ and (max-device-width: 640px)
             width: 15em;
             transition: 0.5s ease-in-out 1ms;
             padding-inline: 1em;
+            margin-inline: 1em;
         }
         & .packImg:hover {
             transform: scale(1.5, 1.5)
@@ -174,7 +184,7 @@ and (max-device-width: 640px)
     .progressionContainer {
         display: flex;
         flex-direction: column;
-        height: 20svh;
+        height: 14svh;
         & h1 {
             font-size: 4em;
             font-family: 'MedievalSharp', cursive;
@@ -212,10 +222,24 @@ and (max-device-width: 640px)
 
         }
 
-        /*TODO HERE THE FINAL SECTION FOR THE STICKERS BOYO*/
-
+    }
 
+    #stickersBox {
+        width: 100%;
+        height: inherit;
+        overflow-y: scroll;
 
     }
+    .stickersContainer {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 2em;
+        row-gap: 2em;
+    }
+    .stickerImg {
+        width: 15em;
+        margin: 1.5em;
+    }
 
 }

src/main/resources/templates/users/userFrags.html

   <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
 <article th:fragment="stickersBox" id="stickersBox">
-  <h2>STICKERS!</h2>
+<!--  <h2>STICKERS!</h2>-->
   <div class="stickersContainer">
     <img th:class="'stickerImg ' + ${sticker.getVisibility()}"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
          th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >

src/main/resources/templates/users/userProfile.html

@@ -35,12 +35,14 @@
             <h2>Packs</h2>
              <!--Shows first earned badges, followed by greyed out badges-->
             <div id="allPacksContainer"  class="centerFlex">
+
                 <div th:each="pack : ${packs}"  class="packContainer">
                     <img class="packImg"   th:src="@{'../' + ${pack.getDisplayImg()}}"
                          th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
                          th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
                     <h4 class="packName" th:text="${pack.getName()}"></h4>
                 </div>
+
             </div>
         </article>