Responsive Design

Make websites adapt cleanly to phones, tablets, and desktops.

<style><br /> .wrap { display:grid; grid-template-columns:2fr 1fr; gap:16px; }<br /> .box { padding:24px; border-radius:16px; background:#102943; color:white; }<br /> @media (max-width:700px){<br /> .wrap { grid-template-columns:1fr; }<br /> }<br /> </style><br /> <div class=”wrap”><br /> <div class=”box”>Main content</div><br /> <div class=”box”>Sidebar</div><br /> </div>Open Live Preview

Next: Forms & Data →