At the end I got confused with the use of units of measurement in adaptive layout.
Someone on StackOverflow advised to write everything in vh, but as it turned out, this was the wrong decision. Please tell me the enclosed code of my page where vh should be replaced with other values and why.
@import url("/css/oblacheniya.css"); @import url("/css/oblacheniya-type-select.css"); @import url("/css/product-page.css"); @import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz'); *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; padding: 0; margin: 0; background-color: #B63D32; } #page-wrapper { width: 100%; height: 100%; } #content-wrapper { width: 80%; height: 100%; display: inline-block; float: right; } header { width: 100%; display: flex; justify-content: center; flex-direction: row; position: relative; border-top: 2vh solid black; border-left: 2vh solid black; border-right: 2vh solid black; border-bottom: 1vh solid black; } .container1 { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .logo { width: 11.1vh; height: 11vh; padding-top: 0.8vh; padding-right: 11.5vh; } .logo img { width: 11.3vh; height: 11vh; margin: 0vh auto; padding-top: 0vh; } .main_title { padding-top: 0.2vh; margin-left: 0vh; padding-right: 0vh; font-size: 4vh; font-family: ImpactI, sans-serif; color: #fff; text-shadow: 0vh 0.4vh rgba(0, 0, 0, .34); text-align: center; } .subtitle { font-size: 2vh; font-family: Lobster, sans-serif; letter-spacing: 0.14vh; font-weight: normal; color: #fff; text-align: center; margin-top: -0.3vh; padding-right: 0vh } .second_subtitle { font-size: 2.3vh; color: #000000; font-family: ImpactI, sans-serif; text-shadow: 0.1vh 0.05vh 0.3vh rgba(255,255,255,0.6); background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; letter-spacing: -0.055vh; text-align: center; margin-top: -0.2vh; } .top_navigation-menu { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.5vh; text-align: center; } .top_navigation-menu li { width: 100%; } .top_navigation-menu a { text-decoration: none; color: white; } .top_navigation-menu li{ display: block; margin: 0 auto; width: 100%; text-align: center; } .top_navigation-menu li a { color: white; text-decoration: none; font-size: 2.35vh; font-family: Courier New Cyr, sans-serif; font-weight: bolder; } .container1 ul { padding-bottom: 0vh; margin-bottom: 0vh; } .container1 ul li { padding-bottom: 0vh; margin-bottom: 0vh; } .container1 ul li>a:hover { color: black; transition: 0.4s; } main { width: 100%; height: 114vh; } /*ЛЕВОЕ МЕНЮ*/ /*ЛЕВОЕ МЕНЮ*/ .spisok { display: flex; justify-content: center; position: fixed; height: 100%; width: 20%; background-color: #7B2019; background-repeat: no-repeat; /*border*/ border-top: 1.6vh solid black; border-bottom: 2vh solid #000; border-left: 1.5vh solid #000; border-right: 0vh solid #000; /*border ends*/ } li { list-style-type: none; } .spisok li { width: 24vh; list-style-image: none; height: 5.5vh; background-image: url(/img/span_menu.png); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: center no-repeat; transition: All 0.3s ease-in-out; margin-top: 0.45vh; } #oblacheniya { } .spisok li a { width: 100%; height: 100%; text-decoration: none; font-family: CyrillicOldBold, sans-serif; letter-spacing: 0.05vh; color: white; text-decoration: none; font-size: 2vh; font-weight: normal; } .spisok ul>li:hover { background-image: url(/img/span_menu_hover.png); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: center no-repeat; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; -ms-transition: All 0.3s ease-in-out; transition: All 0.3s ease-in-out; } .spisok ul li>a:hover { text-shadow: gold 0 0 4vh; /* Свечение голубого цвета */ color: white; } ul { padding-left: 0vh; } .button.block { display: flex; justify-content: center; padding-left: 0vh; } .spisok ul { list-style-image: none; display: flex; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .spisok ul li ap { display: flex; justify-content: center; } #ugol { background-image: url(/img/span_menu_black.png); } .text-div { width: 15.8vh; height: 3vh; } .letter-spacing { letter-spacing: 0.1vh; } .ryasi { letter-spacing: 0.2vh; } /*Начало SECTION*/ section { background: url(/img/fon.png); background-color: #BFBFBF; background-size: cover; display: flex; justify-content: flex-start; flex-direction: row; align-items: flex-start; width: 100%; height: 114vh; /*РАМКА*/ border-left: 2vh solid black; border-top: 0vh solid black; border-right: 2vh solid black; border-bottom: 0vh solid black; /*Конец РАМКИ*/ } .container2 { width: 100%; height: 109.9vh; } .Nashi_Tseny { width: 100%; height: 106.9vh; } .photo-price { height: 100vh; } .text-price { position: relative; margin: 0 auto; width: 100%; height: 98vh; border: solid transparent; border-width: 25vh 10vh 15vh 10vh; border-image: url(//i.stack.imgur.com/wky2z.png); border-image-slice: 800 250 338; border-image-repeat: round; } .text-price { font-size: 2.3vh; font-family: Yanone Kaffeesatz, sans-serif; font-style: normal; text-decoration-skip-ink:none; } .text-price p { padding-left: 2vh; } #first_abzac { margin-top: -2vh; } .photo-price { height: 97vh; width: 100%; } .border-price { max-width: 10vh; } .choose_otstup { margin-left: 1vh; } h2 { margin-top: 3vh; font-size: 4.7vh; font-family: ImpactI; font-weight: 400; padding-top: 0.5vh; text-decoration: underline; text-decoration-skip-ink:none; text-align: center; } strong { font-weight: bolder; font-size: 2.1vh; } .vosem_tis { font-style: italic; font-weight: 900; font-family: Lobster, sans-serif; font-size: 1.9vh; } /*НАЧАЛО FOOTER*/ footer { width: 100%; height: 15vh; border-left: 2vh solid black; border-right: 2vh solid black;; border-top: 1vh solid black;; border-bottom: 2vh solid black;; } /*КОНЕЦ FOOTER*/ <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/head.php'; ?> <body> <div id="page-wrapper"> <div id="content-wrapper"> <header> <div class="container1"> <div class="logo"> <img src="/img/logo.png" alt="ШвейПокров"> </div> <div class="main_title"> "ШвейПокров" </div> <div class="subtitle"> Православная швейная мастерская </div> <div class="second_subtitle"> доставка по всей России </div> <ul class="top_navigation-menu"> <li><a href="/index.php">Главная</a></li> <li><a href="/contacts.php">Контакты</a></li> <li id="about-us-nav"><a href="/about.php">О нас</a></li> </ul> </div> </header> <main> <section> <div class="container2"> <div class="Nashi_Tseny"> <h2>Наши цены:</h2> <div class="photo-price"> <div class="text-price"> <p id="first_abzac"><u><b>Облачения</b></u>:</p> <p class="choose_otstup">-иерейские <strong>шелковые</strong> от <strong><span class="vosem_tis">9000</span></strong> рублей с шикарными галунами</p> <p class="choose_otstup">-иерейские <strong>парчевые</strong> от <strong><span class="vosem_tis">10000</span> </strong> рублей<strong>*</strong></p> <p><u><b>Подрясники</b></u>:</p> <p><u><b>Подризники</b></u>:</p> <p><u><b>Рясы</b></u>:</p> <p><u><b>Стихари</b></u>:</p> <p><u><b>Скуфии</b></u>: от 800 рублей;</p> <p><u><b>Камилавки</b></u>: от 1700</p> <p><u><b>Крещальные</b></u>:</p> <p><u><b>Облачения для храма</b></u>:</p> <p><u><b>Вышитые кресты</b></u>:</p> <p><u><b>Кадильный уголь</b></u>:</p> <p class="choose_otstup">*парчевые облачения с индийскими галунами шьются по заказу</p> </div> </div> </div> </section> </main> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/footer.php'; ?> 