Я понятия не имею, что вызывает это, но кажется, что некоторая комбинация контейнера сетки, текст ul и li шире, чем контейнер, заставляет размер шрифта текста расти как размер экрана смартфона или Chrome симуляция телефона. Это, конечно, приводит к непропорциональности текста по отношению к остальной части страницы, что в значительной степени нарушает любой дизайн.
Насколько я могу сказать, это должно повторить проблему:
<html lang="sr">
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
font-style: normal;
font-family: Robo, Arial, Helvetica, sans-serif;
font-size: 16px;
display: grid;
grid-template-columns: 300px auto;
}
.nav {
margin: 0;
padding: 5px;
grid-column: 1;
background-color: yellow;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="nav">
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<p>THis is a test text to show when and how this effect happens.</p>
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<ul>
<li><h3>Test</h3>
<ul>
<li>ABC</li>
<li><a href="#" >THis is a test text to show when and how this effect happens.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
При этом Если вы откроете страницу на компьютере, она должна показать что-то вроде этого:
Но если я переключусь в режим устройства в Chrome Инспектор и уменьшу По ширине я получаю что-то вроде этого:
То же самое происходит, если я просматриваю страницу на смартфоне:
Инспектор показывает, что, например, этот элемент AB C, даже если его размер шрифта должен быть 16px, высота элемента по некоторым причинам составляет 49px.
Итак, что совершенно очевидно, что я здесь упускаю?!?