diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 91aa6668..35d9f3e8 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1743,6 +1743,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -3065,7 +3069,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
diff --git a/assets/css/main.css b/assets/css/main.css
index 9fe984ca..c7adc45a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -348,7 +348,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;
diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js
index 89f0fdcd..315ffb7f 100644
--- a/exampleSite/assets/js/home.js
+++ b/exampleSite/assets/js/home.js
@@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 var list_config = [
-  "CardViewProse",
   "CardViewScreenWidth",
+  "CardViewProse",
   "NormalView"
 ]
 
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 776f49aa..5c51c970 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -26,7 +26,7 @@ mainSections = ["docs"]
   layout = "custom" # valid options: page, profile, hero, card, background, custom
   homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = false
-  showRecentItems = 9
+  showRecentItems = 10
   showMoreLink = true
   showMoreLinkDest = "docs"
   cardView = true
diff --git a/exampleSite/layouts/partials/recent-articles-demo.html b/exampleSite/layouts/partials/recent-articles-demo.html
index d2d79088..6586d196 100644
--- a/exampleSite/layouts/partials/recent-articles-demo.html
+++ b/exampleSite/layouts/partials/recent-articles-demo.html
@@ -16,7 +16,7 @@
     </span>
 </div>
 
-<div id="CardViewProse" class="">
+<div id="CardViewProse" class="hidden h-full">
     <section class="w-full">
         <div class="flex flex-wrap">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
@@ -28,8 +28,9 @@
         </div>
     </section>
 </div>
-<div id="CardViewScreenWidth" class="hidden h-full">
-    <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+
+<div id="CardViewScreenWidth" class="">
+    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
         <div class="flex flex-wrap pl-8 pr-8">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
             .Site.Params.mainSections)).Pages }}
@@ -40,6 +41,7 @@
         </div>
     </section>
 </div>
+
 <div id="NormalView" class="hidden h-full">
     <section class="space-y-10 w-full">
         {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
diff --git a/layouts/partials/recent-articles.html b/layouts/partials/recent-articles.html
index a80fc690..97f572e4 100644
--- a/layouts/partials/recent-articles.html
+++ b/layouts/partials/recent-articles.html
@@ -8,7 +8,7 @@
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen" style="left: calc(-50vw + 50%);">
+<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
   <div class="flex flex-wrap pl-8 pr-8">
     {{ else }}
     <section class="w-full">