Когда проверяешь адаптацию под телефоны, то почему то размер текста не подстраивается
на компе это норм,
у меня такая ересть в первый раз, я даже через media шрифт на 5-10рх снижал, а тут такое.
///css///
Dmitrijs Balcers "
fonts.fontstorage.com/import/sharetechmono.css";
* {
margin:0;
padding: 0;
}
body {
margin:0;
font-family: 'Share-TechMono';
font-size: 17px;
color:#fff;
line-height: 1.6;
}
.navbar {
text-align: center;
border-radius: 0;
background: rgba(255, 255, 255, 0.1);
}
.navbar li {
line-height: 10vh;
list-style: none;
display: inline;
}
.navbar a {
color:#fff;
font-size: 18px;
text-decoration: none;
}
media only screen and (max-width: 700px) {
.navbar li {
display: block;
text-align: center;
}
}
#inner {
background-image: url(../img/bg.jpg);
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
}
#inner h1 {
align-items: center;
text-align: center;
margin-top: 16vh;
font-size: 70px;
}
#inner p {
align-items: center;
text-align: center;
margin-top: 5vh;
font-size: 30px;
}
.link {
align-items: center;
text-align: center;
margin-top: 20vh;
}
.link a {
width: 300px;
height: 50px;
border-radius: 10px;
line-height: 50px;
color:#fff;
text-decoration: none;
border:1px solid #fff;
display: inline-block;
-webkit-transition: background 1s ease, color 1s ease;
}
#inner .button:hover {
background:#fff;
color:#000;
}
///html///
<header id="showcase">
<div id="inner">
<div class="navbar">
<li><a style="font-size: 30px;" class="col-md-6 col-sm-6 col-lg-6" href="#">Askadena</a></li>
<li><a class="col-lg-2" href="#">link</a></li>
<li><a class="col-lg-2" href="#">link</a></li>
<li><a class="col-lg-2" href="#">link</a></li>
</div>
<h1>Askadena</h1>
<p>Music Creator</p>
<div class="link">
<a href="" class="button">Read More</a>
</div>
</header>
Простой
