more info

src/public/css/offers.css

@@ -36,6 +36,7 @@
     width: 100%;
     height: 500px;
     margin: 5px 5px;
+    padding: 5px;
   }
 }
 
@@ -77,6 +78,7 @@
     min-width: 400px;
     height: 500px;
     margin: 10px 10px;
+    padding: 10px;
   }
 
 }
@@ -107,19 +109,24 @@
 
 .myoffer-card {
   display: grid;
-  grid-template-columns: 46% 8% 46%;
+  grid-template-columns: 48% 4% 48%;
   grid-template-rows: 23% 1% 18% 1% 18% 1% 18% 1% 20%; 
 }
 
+.myoffer-card > div {
+  padding: 5px;
+}
+
+.myoffer-card p {
+  margin: 0;
+}
+
 .trade-desc {
   grid-column: 1;
   grid-row: 1;
   text-align: left;
 }
 
-.trade-desc > p {
-  margin: 0;
-}
 
 .offer-card-content-title {
   color: gray;
@@ -138,16 +145,23 @@
   text-align: right;
 }
 
-.premium-desc > p {
-  margin: 0;
-}
-
 .where-desc {
   grid-column: 1;
   grid-row: 3;
   text-align: left;
+  overflow-y: auto;
+  overflow-x: hidden; 
 }
 
+.when-desc {
+  grid-column: 3;
+  grid-row: 3;
+  text-align: right;
+  overflow-y: auto;
+  overflow-x: hidden; 
+}
+
+
 #create-offer-controls {
   text-align: center;
 }

src/public/javascript/offers.js

@@ -264,7 +264,6 @@ class Offer {
     premiumDescDiv.append(marketPriceTitle);
 
     const marketPriceData = document.createElement('p');
-    marketPriceData.classList.add('offer-card-content-tile');
     marketPriceData.innerText = `88000 €/BTC`;
     premiumDescDiv.append(marketPriceData);
 
@@ -272,7 +271,29 @@ class Offer {
     whereDescDiv.classList.add('where-desc');
     whereDescDiv.classList.add('subtle-box');
 
-    offerCard.append(tradeDescDiv, premiumDescDiv, whereDescDiv);
+    const whereDescTitle = document.createElement('p');
+    whereDescTitle.classList.add('offer-card-content-title');
+    whereDescTitle.innerText = 'Dónde';
+    whereDescDiv.append(whereDescTitle);
+
+    const whereDescData = document.createElement('p');
+    whereDescData.innerText = `${this.location_details}`;
+    whereDescDiv.append(whereDescData);
+
+    const whenDescDiv = document.createElement('div');
+    whenDescDiv.classList.add('when-desc');
+    whenDescDiv.classList.add('subtle-box');
+
+    const whenDescTitle = document.createElement('p');
+    whenDescTitle.classList.add('offer-card-content-title');
+    whenDescTitle.innerText = 'Cúando';
+    whenDescDiv.append(whenDescTitle);
+
+    const whenDescData = document.createElement('p');
+    whenDescData.innerText = `${this.time_availability_details}`;
+    whenDescDiv.append(whenDescData);
+
+    offerCard.append(tradeDescDiv, premiumDescDiv, whereDescDiv, whenDescDiv);
 
     return offerCard;
   }