CSS: Appearance
Make your page work on a phone
Your goal: Finish and test your styled hobby page.
Learn
Flexible widths and a viewport meta tag help pages fit small screens. Images should fit their container. Use a comfortable text size and let columns stack on narrow screens.
View starter code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My hobby page</title>
<style>
body {
font: 1rem/1.6 Arial, sans-serif;
}
</style>
</head>
<body>
<h1>My hobby</h1>
<p>I enjoy learning something new.</p>
<main>
<p>Add your hobby sections here.</p>
</main>
</body>
</html>Your challenge
Apply what you learned to your hobby page. Test a narrow window and download the styled version.
Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.
Practise in the sandboxShow a hint
Use max-width instead of a fixed page width. Keep the viewport meta tag.
Show a sample answer
Try the challenge first. This is one possible answer or a snippet to adapt.
body {
margin: 0;
padding: 20px;
font: 1rem/1.6 Arial, sans-serif;
}
main {
max-width: 800px;
margin: auto;
}
img {
max-width: 100%;
height: auto;
}Check your work
At a phone-sized width, text is readable, images fit and no horizontal scrolling is needed.
Completion is your own check, not an automatic grade.