Another collaborative post from Philip Greenspun and John Morgan…
Let’s see what the Giants of Coding can do in the world of HTML and CSS design. Web page design should be much easier than generating C, Java, Python, etc. because people with no programming experience are often capable of writing HTML/CSS. On the other hand, HTML/CSS also entails the challenge of taste. There is no technical obstacle to making every word on a page bold and bright red, but should every word be bold/red?
This article will compare the performance of ChatGPT, Grok, Gemini, and Claude on the challenge of redesigning a legacy web site to render tastefully and legibly on both mobile and desktop. (Inspiration: Peter Norvig’s comparison of LLM performance on small programming puzzles.)
Let’s start with Berkshire Hathaway, market cap $1 trillion. “Berkshire has failed to outperform the S&P 500 since 2008—not because Buffett lost his touch, but because deploying an unwieldy $1 trillion in capital effectively is exponentially harder than investing millions” says Morningstar. The underperformance relative to the S&P can’t be attributed to diverting effort into web page design. The home page is a hideous example of misleading user interface. The text that isn’t hyperlinked is in blue, the standard color for hyperlinks, and unvisited links are in purple, the standard color for already-visited hyperlinks. This isn’t a site that was competently built in the mid-1990s and then didn’t evolve with the rest of the Web; it would have been an example of substandard web design taste even in the mid-1990s.
How does it perform on mobile (iPhone 17 Pro Max; Chrome)? It’s a literal waste of (screen) space:
Tiny barely legible fonts and half the screen left blank.
The Prompt
Here’s an HTML file [upload] with no style sheet reference that doesn’t render well on mobile. Please create a .css file that it can reference and also tell me what changes will be needed in the .html (please keep this to a minimum) to make the site responsive and also look as good as it can on both desktop and mobile.
from Grok
Here’s a practical approach to make the Berkshire Hathaway homepage look decent on both desktop and mobile with minimal HTML changes and one new CSS file.
Minimal HTML changes required
Add these two lines inside the <head> (right after the <title> is fine):
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="berkshire.css">
That’s it for HTML edits. (If the file is named something else, adjust the href accordingly.)
Suggested berkshire.css file
CSS
/* ============================================================================
Berkshire Hathaway Homepage - Responsive CSS
Minimal modern cleanup + mobile-friendly layout
============================================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000080;
background-color: #ffffff;
line-height: 1.45;
}
...
font[size="1"] {
font-size: 0.78rem;
}
}
What this CSS does
- Keeps the classic Berkshire color scheme and serif font feel
- Makes the two-column table become a single-column stacked layout on phones/tablets
- Improves spacing, readability and touch targets
- Slightly modernizes typography without destroying the retro aesthetic
- Handles very small screens reasonably well
Optional nice-to-have HTML improvements (not required)
If you are willing to make a few more small changes later:
HTML
<!-- Replace the big first <p align="center"><b>...</b></p> with: -->
<h1 style="text-align:center; margin:1.5rem 0; font-size:clamp(2rem, 8vw, 3.4rem);">
B<span style="font-size:0.65em;">ERKSHIRE </span>
H<span style="font-size:0.65em;">ATHAWAY </span>
INC.
</h1>
<p style="text-align:center; color:#333; font-size:1.1rem; margin-bottom:1.5rem;">
3555 Farnam Street<br>Omaha, NE 68131<br>
<strong>Official Home Page</strong>
</p>
But again — the two <head> lines + the CSS file above should already give you a surprisingly usable mobile experience with almost zero HTML surgery.
Let me know if you’d like a darker mode variant or more aggressive modernization while still preserving the spirit of the page.
after Grok
Desktop:
Mobile:
from Gemini
It is a classic “rite of passage” for developers to look at the Berkshire Hathaway website—it’s famously minimalist (some might say “frozen in 1996”).
To modernize this without stripping its soul, we need to move away from fixed-width tables and use a CSS Grid layout.
1. The CSS File (
style.css
)
Create a new file named
style.css
in the same folder as your HTML. This code handles the responsiveness, typography, and spacing.
/* Basic Reset & Typography */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #000080;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
}
...
/* The Magic: Convert the Table to a Responsive Grid */
tbody {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
gap: 20px;
}
...
.geico-box {
text-align: center;
padding: 20px;
background: #fff;
}
2. Changes to the HTML
You only need to add two lines to your
<head>
section. Everything else will be handled by the CSS targeting the existing tags.
- The Viewport Meta Tag: This tells mobile browsers to match the screen width.
- The Link Tag: This connects your new CSS file.
Add these inside the
<head>
tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
What these changes achieve:
- Mobile First: On a phone, those two columns of links will now stack vertically so you don’t have to “pinch and zoom” to read them.
- Readability: It replaces the default Times New Roman with modern system fonts that are much easier on the eyes.
- Touch Friendly: By adding padding and a light background color to the table cells (
td
), we turn the links into “cards” that are much easier to tap with a thumb. - Minimal Intrusion: We didn’t have to rewrite the table structure or delete any of the original content, which honors the “no-nonsense” spirit of the original site.
Would you like me to help you refactor the HTML further to remove the legacy
<font>
and
<center>
tags entirely for better SEO?
after Gemini
Desktop:
Mobile (less compact than Grok’s layout, but arguably more attractive and consistent):
from Claude (slick two-window presentation! Multi-minute analysis)
after Claude
Desktop:
Mobile (failure to notice that the text will overlap; perhaps the AI doesn’t have its own headless browser where it can test and see whether HTML/CSS renders properly?):
from ChatGPT
Below is a drop-in stylesheet + the smallest HTML tweaks needed to make your page render cleanly on phones while still looking good on desktop (your file is very “classic” HTML with
<font>
tags + a two-column
<table>
layout berkshire-hathaway).
1) Create
styles.css
Save this as
styles.css
in the same folder as your
.htm
file:
/* styles.css - responsive polish for legacy table/layout HTML */
/* --- sensible defaults --- */
:root {
--page-max: 980px;
--pad: 16px;
--text: #0a2a6a; /* close to the original text color */
--bg: #ffffff;
--link: #5a1a7a; /* close to the original link color */
--visited: #b00000; /* close to the original vlink */
--rule: rgba(0,0,0,0.18);
}
...
/* Lists look cramped by default in many browsers */
ul {
margin: 0.4rem 0 0.8rem 0;
padding-left: 1.25rem;
}
li { margin: 0.35rem 0; }
...
/* --- mobile: convert the 2-col table into stacked sections --- */
@media (max-width: 640px) {
:root { --pad: 14px; }
/* Turn table rows/cells into blocks so each "column" stacks */
table, tbody, tr, td { display: block; width: 100% !important; }
td {
padding: 6px var(--pad);
}
/* Reduce overly-large headline spacing on small screens */
p[align="center"] {
margin: 12px auto;
}
/* Better tap targets for links inside list items */
li a {
display: inline-block;
padding: 6px 0;
}
}
What this accomplishes:
- Keeps the old-school Berkshire look (colors, centered header, simple typography), but
- Prevents horizontal squish/overflow, and
- Stacks the two columns into a single column on phones (because your core layout is a 2-column table with
width="50%"
tds berkshire-hathaway).
2) Minimal HTML changes needed
A) Add viewport + CSS link (recommended)
In your
<head>...</head>
add these two lines (anywhere before
</head>
):
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
Why: without a viewport meta tag, mobile browsers often render “desktop width” then shrink it, making everything tiny.
B) (Optional but nice) add a language attribute
Change:
<html>
to:
<html lang="en">
That’s it—no restructuring required. The stylesheet is designed to “wrap” and modernize the existing markup (including the
<table width="90%">
layout berkshire-hathaway) without you having to rewrite the HTML.
If you want, I can also provide a second CSS variant that’s more “modern” (card-like sections, a little more whitespace, subtle background tint) while still preserving the minimalist vibe—still with minimal/no HTML changes.
after ChatGPT
Desktop:
Mobile (another failure via overlap):
after ChatGPT again (accepted the offer of a more modern CSS)
Desktop:
Mobile (still overlapping):
Summary
Despite the apparent simplicity of the challenge, Gemini was the only LLM that was able to create a web site that rendered well on mobile. Grok came in second with a mobile rendering that featured odd spacing and horizontal lines placed seemingly randomly but at least kept the text legible. Both ChatGPT and Claude’s styling resulted in mobile rendering that can only be described as broken with multiple instances of overlapping text.
These LLMs probably could do much better if they ran an open-source web browser, such as Firefox, internally and used the browser to render whatever they’d designed and then used their image understanding capabilities to spot obvious problems, e.g., overlapping blocks of text.
Stay turned for more comparisons among LLMs in the web development domain, including a look at the Brave New World of artificial intelligence in integrated development environments (AI in IDEs).
Full post, including comments 
