Video narration
Here’s a simple responsive CSS example for mobile and small screens. We’ll use a media query: @media (max-width: 768px). That means when the screen is 768 pixels wide or less, these styles take over. First, the navbar. On large screens it might be a row, but inside the media query we set: flex-direction: column; and add gap: 15px; so the links stack vertically with breathing room. Next, the about section. If .about-content is a horizontal layout on desktop, we switch it on small screens with: flex-direction: column; so the text and image stack neatly. One important rule: CSS keywords and syntax—like @media, max-width, flex-direction, and gap—must stay in English exactly. But comments inside /* ... */ are ignored by the browser, so you can write them in Gujarati or any language to help humans read the code.