balance list updated responsive

index.html

@@ -23,31 +23,31 @@
         </ul>
 
     </nav>
-
-    <div class="balance-list">
-        <div class="overview">
-            <div id="title">Balance:</div>
-            <div id="total-amount">500,00 Euro</div>
-        </div>
-        <div class="grid-wrapper">
-            <div class="box">
-                <div class="dropdown"></div>
-                <span class="entry">Beschreibung</span>
-                <span class="amount">Betrag</span>
+    <div class="balance-list-wrapper">
+        <div class="balance-list">
+            <div class="overview">
+                <div id="title">Balance:</div>
+                <div id="total-amount">500,00 Euro</div>
             </div>
-            <div class="box">
-                <div class="dropdown"></div>
-                <div class="entry">Beschreibung</div>
-                <div class="amount">Betrag</div>
-            </div>
-            <div class="box">
-                <div class="dropdown"></div>
-                <div class="entry">Beschreibung</div>
-                <div class="amount">Betrag</div>
+            <div class="grid-wrapper">
+                <div class="box">
+                    <div class="dropdown"></div>
+                    <span class="entry">Beschreibung</span>
+                    <span class="amount">100,00 Euro</span>
+                </div>
+                <div class="box">
+                    <div class="dropdown"></div>
+                    <div class="entry">Beschreibung</div>
+                    <div class="amount">50,00 Euro</div>
+                </div>
+                <div class="box">
+                    <div class="dropdown"></div>
+                    <div class="entry">Beschreibung</div>
+                    <div class="amount">2,99 Euro</div>
+                </div>
             </div>
         </div>
     </div>
-
 </body>
 
 </html>

index_styles.css

@@ -1,6 +1,7 @@
 * {
     padding: 0;
-    margin: 0rem;
+    margin: 0;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
 .menu_left_element {
@@ -24,7 +25,6 @@
     height: 100%;
     text-decoration: none;
     padding: 0.4rem;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     font-size: 2.6rem;
     text-decoration-color: black;
 }
@@ -53,18 +53,18 @@
 
 .grid-wrapper {
     display: grid;
-    padding: 0 2em 0 2em;
     grid-template-columns: 1fr;
     grid-template-rows: 80px 80px 80px;
     grid-gap: 10px;
 }
 
+
 .box {
     background-color: #C4C4C4;
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-areas: "dropdown entry entry entry entry entry entry entry entry entry amount amount";
-    font-size: 2em;
+    grid-template-columns: 20px 50% auto;
+    grid-gap: 5px;
+    font-size: 1.4em;
     border-radius: 10px;
 }
 
@@ -73,21 +73,24 @@
     vertical-align: center;
     align-items: center;
     padding: 5px;
-    grid-area: entry;
 }
 
 .amount {
     display: flex;
-    vertical-align: center;
+    justify-content: flex-end;
     align-items: center;
     padding: 10px;
-    text-align: right;
-    grid-area: amount;
+}
+
+.balance-list-wrapper {
+    display: flex;
+    justify-content: center;
 }
 
 .balance-list {
     display: grid;
-    grid-template-areas: ;
+    width: 700px;
+    margin: 20px;
 }
 
 .overview {
@@ -105,9 +108,9 @@
 }
 
 .dropdown {
-    grid-area: dropdown;
     background-image: url("./components/icons/caret-down-solid.svg");
     background-repeat: no-repeat;
-    background-position: center;
-    fill: #F3f3F3
+    background-size: 15px;
+    background-position: right;
+    color: #f3f3f3;
 }