To make a website mobile friendly, the first step is setting the correct viewport.
The viewport controls how a page is scaled and displayed on mobile devices.
Without a proper viewport, your website may look zoomed out or too small on phones.
The viewport meta tag tells the browser to match the screen width of the device.
This makes layouts behave correctly on mobile screens.
This layout automatically adjusts on smaller screens.
When space becomes limited, the columns move to the next line.
This is how modern websites create mobile friendly sections.
The grid automatically changes the number of columns based on screen width.
Mobile friendly design rules
- Always use the viewport meta tag
- Use flexible widths instead of fixed pixels
- Avoid horizontal scrolling
- Make text readable without zooming
Using max-width with percentages keeps content readable on both small and large screens.
Practice task
Create a page and:
- Add the viewport meta tag
- Use flexible widths
- Test the page on mobile view
- Check that no horizontal scrolling appears
Next lesson
In the next page, you will learn the basics of media queries.