Many of your users are on Android phones, often with small screens and mobile data, and many others are on laptops and desktops. Responsive design appears in junior frontend adverts and in skills frameworks, and for SydCrest learners it is the default way to work, not an extra.
What mobile first means
Mobile first means you write your base CSS for a small screen, then add rules for larger screens using media queries. The opposite approach, designing for a laptop and squeezing it down later, usually leaves phones with cramped, broken pages.
.menu { display: grid; gap: 12px; }
@media (min-width: 700px) {
.menu { grid-template-columns: 1fr 1fr; }
}On a phone the menu is a single column. When the screen is at least 700 pixels wide, it becomes two columns. Choose breakpoints where your design starts to look awkward, not based on particular phone models.
The viewport tag
Without this line in your HTML head, phones pretend to be wide desktop screens and shrink your page to tiny text:
<meta name="viewport" content="width=device-width, initial-scale=1">