Я делаю WWW-страницу на дисплее гибкой, но при увеличении масштаба она перемещается.Текст сваливается
Я пытался установить размер шрифта, но это не помогло.
@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway|Roboto&display=swap');
body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container {
background-image: url('wave.jpg');
width: 100vw;
margin: 0;
padding: 0;
flex-direction: column;
display: flex;
align-items: flex-start;
}
.navigation {
width: 100vw;
background-color: coral;
height: 10vh;
display: flex;
flex-direction: row;
font-size: 25px;
}
.photo-container {
width: 100vw;
background-color: lightblue;
height: 90vh;
display: flex;
overflow: hidden;
}
.articles {
width: 100vw;
background-color: greenyellow;
height: 20vh;
}
/* Mniejsze kafelki */
.navigation-l {
width: 50vw;
height: inherit;
background-color: indianred;
}
.navigation-r {
width: 50vw;
height: inherit;
background-color: lightsalmon;
}
.aligned-center {
width: 1000px;
height: auto;
align-self: center;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.panel button {}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Keat </title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/fontello.css" type="text/css">
</head>
<body>
<div class="container">
<div class="navigation">
<div class="navigation-l">fgfgfg</div>
<div class="navigation-r">
bbbbbb
</div>
</div>
<div class="photo-container">
<div class="aligned-center">
<i class="icon-address"></i>
<h1>Own Way</h1>
<cite>"Marzenia są tam gdzie jest wolnośc, a my osiągnielismy wolność a nie bezpieczeństwo"</cite>
<br /><br />
<cite> ~Jacek Walkiewicz</cite>
</div>
</div>
<div class="articles"></div>
</div>
Ожидается: текст не будет распространяться по всей странице, но требуется масштабирование div без масштабирования текста
Результат: масштабирование текста прине должно.Я проверил увеличение на других страницах, и это делало div больше, чем текст.Может быть, это из-за его гибкости и его 50% или 100% страницы.Я не знаю