Menu

Post image 1
Post image 2
1 / 2
0

I gave up on making my AI builder write good media queries

DEV Community: tailwindcss·Pranav Chandra·3 days ago
#xtsYgxKl
#dev#desktop#mobile#model#column#first
Reading 0:00
15s threshold

Every site my AI website builder produced looked great on a phone and weak on a desktop. The hero stretched edge-to-edge in a single anemic column. Features grids stayed at one column on a 27" monitor. Section padding that felt generous on mobile felt empty at desktop widths. I spent two weeks trying to fix this from the prompt side. None of it worked the way I wanted. Then I gave up on the approach entirely and switched the generation to Tailwind via CDN . The desktop problem disappeared. This is the writeup of why the original approach was wrong, what I tried first, and the specific change that mattered. The symptom The system prompt told the model to write mobile-first CSS: Default CSS targets mobile (≤480px); layer up with @media (min-width: 768px) and (min-width: 1024px) . Models followed the instruction. They wrote good mobile rules. Then they wrote thin, half-hearted desktop overrides — a max-width here, a media query for two-column layout there.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More