Весь текст внутри h1
, h3
, li
выглядит слишком большим на экранах, ширина которых меньше 640px
.
Давай это исправим. Надо размеры шрифтом для этих экранов уменьшить в 1.6 раза.
Обязательное условие - размер шрифта нужно изменить с помощью другого элемента.
Это связано с тем, что размеры указаны относительные.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE>
<html>
<head>
<title>Font-sizes</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<style>
body {
font-family: "Andale Mono", "Monotype.com", monospace;
margin: 0;
display: grid;
place-content: center;
height: 100vh;
padding: 0 20px;
}
ol {
padding: 0;
list-style: none;
}
li::before,
li::after {
content: "\01F525";
padding: 0 15px;
}
h1, h3, li {
text-align: center;
}
h1 {
font-size: 3rem;
margin: 10px 0;
}
h3 {
font-size: 2.1rem;
margin: 5px 0;
}
li {
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>Junior Software Developers</h1>
<h3>9 Tips</h3>
<ol>
<li>Start a side project</li>
<li>Take notes, lots of notes</li>
<li>Plan before you code</li>
<li>Take an interest in security</li>
<li>Plan your day</li>
<li>Understand the product you're building</li>
<li>Take an interesting in system architecture</li>
<li>Test your code and test it well</li>
<li>Ask for help</li>
</ol>
</body>
</html>