diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md
index 44e324f..f5ee175 100644
--- a/docs/AI_USAGE.md
+++ b/docs/AI_USAGE.md
@@ -596,3 +596,10 @@
 - **What the team did:** Took the peer feedback that the README (about 59 kB) is too long to find your way in, wrote issue #182, and asked for the reasoning to be kept.
 - **What Claude did:** Moved four long sections unchanged to their own documents (`ELEMENTS_PAGE.md`, `DATABASE_SETUP.md`, `CATALOG_SEARCH.md`, `E2E_TESTS.md`) with a short summary and a link in the README (now about half the size). Added a "Where is what" table that points from each feature to the file where it starts, and a list of contents at the top of `docs/API.md`. A script checked that every relative link and anchor in the changed files works.
 - **Limits:** The text of the moved sections was not shortened or checked again, so what was outdated in them is still outdated (that is issue #148). A first run of the move emptied `README.md` because a formatting command was cut off in a pipe; it was restored from git and run again.
+
+## The result cards and the title on a phone (`src/components/elements/ResultsTable.tsx`, `src/styles/global.css`)
+
+- **Tool:** Claude Code
+- **What the team did:** Took the peer feedback that a result card on a phone takes almost a whole screen and that the title is a little small (issue #169).
+- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). After the first version Ronja looked at the cards in the browser and asked for a fix for each thing that was not logical (the drawing was too small to understand, the spacing of the fields); the changes were tried one by one and those she did not want were undone. Tried a small drawing next to the text (the cards were 162 to 182 px, but the drawing was 96 px wide and could not be understood), and a switch "Show drawings" (not kept, the team did not want one more control). Kept the drawing under the text, at most 112 px high (it was up to 224 px), and put the apparatus, the element group and the difficulty in a row that wraps below 600 px. The title of the Elements page is 40 px (was 34 px) with smaller margins.
+- **Limits:** Measured on one machine with the first page of the results. The cards are about 258 px high at 360 and 390 px and 282 px at 320 px (before: 334 to 372 px), so about one card fully on the first screen and not twice as many results as the issue asked for. The two-column cards from 600 px are not changed.
diff --git a/src/components/elements/ResultsTable.tsx b/src/components/elements/ResultsTable.tsx
index 8ff38d8..cfea747 100644
--- a/src/components/elements/ResultsTable.tsx
+++ b/src/components/elements/ResultsTable.tsx
@@ -39,7 +39,7 @@ function ResultCards({ rows }: { rows: ElementListRow[] }) {
       {rows.map((row) => (
         <li
           key={row.id}
-          className="group relative flex cursor-pointer flex-col rounded-lg bg-(--surface) p-4 text-left text-(--text-color) shadow-(--box-shadow) transition-[transform,box-shadow,background-color] duration-150 [--card-hover:color-mix(in_srgb,var(--surface),var(--text-color)_var(--row-hover-amount))] hover:bg-(--card-hover) hover:shadow-[0_6px_16px_rgba(3,2,2,0.2)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-solid focus-within:outline-(--text-color) motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-reduce:transition-none"
+          className="group relative flex cursor-pointer flex-col rounded-lg bg-(--surface) p-4 text-left max-[599px]:p-3 text-(--text-color) shadow-(--box-shadow) transition-[transform,box-shadow,background-color] duration-150 [--card-hover:color-mix(in_srgb,var(--surface),var(--text-color)_var(--row-hover-amount))] hover:bg-(--card-hover) hover:shadow-[0_6px_16px_rgba(3,2,2,0.2)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-solid focus-within:outline-(--text-color) motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-reduce:transition-none"
         >
           <div className="flex items-start justify-between gap-3">
             <h3 className="m-0 text-lg leading-tight font-bold">
@@ -64,19 +64,31 @@ function ResultCards({ rows }: { rows: ElementListRow[] }) {
               className="mt-0.5 size-5 shrink-0 -translate-x-1 opacity-0 transition-[opacity,translate] duration-150 group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 motion-reduce:transition-none [@media(hover:none)]:translate-x-0 [@media(hover:none)]:opacity-100"
             />
           </div>
-          <p className="m-0 mt-2 text-sm leading-snug">{row.description}</p>
-          <dl className="m-0 mt-4 grid grid-cols-[8rem_1fr] items-center gap-x-3 gap-y-2 text-sm">
-            <dt className="font-bold">Apparatus:</dt>
-            <dd className="m-0">{row.apparatusName}</dd>
-            <dt className="font-bold">Element group:</dt>
-            <dd className="m-0">{groupLabel(row)}</dd>
-            <dt className="font-bold">Difficulty:</dt>
-            <dd className="m-0">
-              <DifficultyBadge difficulty={badgeValue(row)} />
-            </dd>
+          <p className="m-0 mt-2 text-sm leading-snug max-[599px]:mt-1">
+            {row.description}
+          </p>
+          {/* Below 600 px the three pairs are in a row that wraps, to save height. From
+              600 px they are a table of two columns (each pair is then "contents"). */}
+          <dl className="m-0 mt-4 grid grid-cols-[8rem_1fr] items-center gap-x-3 gap-y-2 text-sm max-[599px]:mt-2 max-[599px]:flex max-[599px]:flex-wrap max-[599px]:gap-x-4 max-[599px]:gap-y-1">
+            <div className="flex items-center gap-1.5 min-[600px]:contents">
+              <dt className="font-bold">Apparatus:</dt>
+              <dd className="m-0">{row.apparatusName}</dd>
+            </div>
+            <div className="flex items-center gap-1.5 min-[600px]:contents">
+              <dt className="font-bold">Element group:</dt>
+              <dd className="m-0">{groupLabel(row)}</dd>
+            </div>
+            <div className="flex items-center gap-1.5 min-[600px]:contents">
+              <dt className="font-bold">Difficulty:</dt>
+              <dd className="m-0">
+                <DifficultyBadge difficulty={badgeValue(row)} />
+              </dd>
+            </div>
           </dl>
           {row.hasVariants && (
-            <span className={`${MORE_VARIANTS} mt-4 inline-block self-start`}>
+            <span
+              className={`${MORE_VARIANTS} mt-4 inline-block self-start max-[599px]:mt-2`}
+            >
               More variants
             </span>
           )}
@@ -90,7 +102,7 @@ function ResultCards({ rows }: { rows: ElementListRow[] }) {
             onError={(event) => {
               event.currentTarget.hidden = true
             }}
-            className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain"
+            className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain max-[599px]:mt-2 max-[599px]:max-h-28"
           />
         </li>
       ))}
diff --git a/src/styles/global.css b/src/styles/global.css
index d49730c..d1781a7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -86,6 +86,16 @@
   font-weight: 800;
 }
 
+/* On a phone the title is larger (peer feedback: it was a little small) and its
+   margins are tighter, so the larger title does not push the results down. */
+@media (max-width: 599px) {
+  #root .elements-page h1 {
+    font-size: 2.5rem;
+    line-height: 1.1;
+    margin: 0.5rem 0 0.75rem;
+  }
+}
+
 #root .elements-page h2 {
   font-size: 1.25rem;
   margin-bottom: 0.75rem;