fix extra space on fewer cards. (#268)

hlxsites · Sep 4, 2024 · b2e1ceb · b2e1ceb
1 parent 06db12d
commit b2e1ceb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/blocks/property-listing/property-listing.js b/blocks/property-listing/property-listing.js
@@ -10,6 +10,10 @@ export default async function decorate(block) {
   // Find and process list type configurations.
   const config = readBlockConfig(block);
   const search = await Search.fromBlockConfig(config);
+  if (search.pageSize % 4 !== 0) {
+    search.pageSize -= (search.pageSize % 4);
+  }
+
   search.franchiseeCode = getMetadata('office-id');
   const searchUrl = `search?${search.asCregURLSearchParameters()}`;
 
@@ -35,7 +39,7 @@ export default async function decorate(block) {
     block.innerHTML = '';
   }
 
-  const list = div({ class: `property-list-cards rows-${Math.floor(search.pageSize / 8)}` });
+  const list = div({ class: `property-list-cards rows-${Math.floor(search.pageSize / 4)}` });
   block.append(list);
   propertySearch(search).then((results) => {
     renderCards(list, results.properties);

diff --git a/blocks/shared/property/cards.css b/blocks/shared/property/cards.css
@@ -331,7 +331,7 @@
 @media (min-width: 1200px) {
   .property-list-cards {
     display: grid;
-    grid-template: repeat(2, 1fr) / repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     padding-bottom: 20px;
   }