Your page looks right on your laptop and scrolls sideways on your phone: this guide finds what is too wide and fixes the usual causes one at a time.

The examples here are screenshots; they run live in the original article .

You will build a small travel page that breaks on a phone the way real pages do, look at it the way a phone does, find the parts that stick out, and fix each one. At the end the same page is one column on a phone and two columns on a laptop. You need a React app with Box Kite installed; if you do not have one yet, steps 1 and 2 of Your first web page with Box Kite take two minutes.

Step 1: build a page that breaks

Replace everything in src/App.tsx with this:

import Box from '@box-kite/react' ; import Flex from '@box-kite/react/components/flex' ; import { Aside , H1 , Img , Li , Link , P , Ul } from '@box-kite/react/components/semantics' ;

const photo = 'https://www.box-kite.dev/img/blog/a-layout-that-works-on-every-screen/coast.jpg' ; const sections = [ 'Itinerary' , 'Packing list'…